/* GENERATED by the opener mock's build-theme.py (trailer/docs/concept-2026-10-21/mock): do not edit here.
   The scene player (opener.css) with every face self-hosted from ../fonts/opener/ (the site makes no
   Google Fonts requests); each scene's css is its own file beside this one. */

/* ---- self-hosted faces (latin subsets from Google Fonts, fetched by build-theme.py; the icon font is the
   Material Symbols Outlined subset of exactly the 82 icon names the scenes use) ---- */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/opener/fraunces-var.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/opener/inter-tight-var.woff2) format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/opener/jetbrains-mono-var.woff2) format('woff2');
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/opener/anton-400.woff2) format('woff2');
}
@font-face {
  font-family: 'Varela Round';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/opener/varela-round-400.woff2) format('woff2');
}
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/opener/titillium-web-400.woff2) format('woff2');
}
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/opener/titillium-web-700.woff2) format('woff2');
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/opener/roboto-condensed-var.woff2) format('woff2');
}
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url(../fonts/opener/material-symbols-outlined-subset.woff2) format('woff2');
}

/* ======== opener.css ======== */
/* The opener: the listing round trip, loop one (mock, 2026-10-21).
   Left: a faithful slice of Templatizer3's staging queue (values ported verbatim from
   page-staging.php's inline <style>, templatizer.css and WP core's button/input rules).
   Right: the AllOEMRims storefront rim card (values from the theme's main.css).
   Scoped under .op-* so the site's own CSS cannot restyle the ported screens. */

.op-stage { position: relative; z-index: 2; width: 100%; max-width: 704px; justify-self: start; height: 800px; padding: 80px 0 0; }
.op-stage, .op-stage * { box-sizing: border-box; }


/* ---------- the cursor ---------- */
.op-cursor { position: absolute; left: 0; top: 0; width: 22px; height: 28px; z-index: 9; pointer-events: none; opacity: 0;
  transition: opacity .3s ease; filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)); transform-origin: 2px 2px; }
.op-cursor.op-show { opacity: 1; }
.op-cursor.op-press { transform: scale(.88); }

/* ---------- under the stage: caption and the era chips (site register) ---------- */
.op-foot { position: absolute; left: 0; bottom: 44px; margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); max-width: 440px; opacity: 0; transition: opacity .5s ease; }
.op-foot.op-in { opacity: 1; }
/* the blurb is on for the whole run in the hero (a scene used to fade it in at its end); once and watch hide it, the page's own caption carries it */
.op-stage[data-mode="cycle"] .op-scene .op-foot { opacity: 1 !important; transition: none; }
.op-foot b { color: var(--text-primary); font-weight: 600; }
.op-eras { position: absolute; left: 0; bottom: 0; display: flex; align-items: center; gap: 8px; margin: 0; }
.op-eras-l { font-family: var(--font-body); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin-right: 4px; }
.op-era { font-family: var(--font-body); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; padding: 5px 12px; border-radius: 9999px;
  border: 1px solid rgba(var(--accent-cyan-rgb), .55); background: transparent; color: var(--text-primary); cursor: pointer; line-height: 1.4; }
.op-era[aria-pressed="true"] { background: var(--accent-cyan); color: #0a0a0f; border-color: var(--accent-cyan); }
.op-era:hover { border-color: var(--accent-cyan); }

/* the hero grid still holds the copy column on the left; the stage takes the right column */
.hero.hero-field .op-stage { align-self: start; }
/* wide screens: start under the fixed header + the On Air line (94 px on the live site; the hero's own
   24 px padding is above this), and opener.js zooms the film to fit what is left of the viewport */
@media (min-width: 56.26em) { .op-stage { padding-top: 72px !important; } }
@media (prefers-reduced-motion: reduce) { .op-foot, .op-cursor { transition: none; } }

/* ---------- scenes (2026-10-22) ---------- */
.op-scene { display: none; }
.op-scene.is-on { display: block; }
.op-scene.is-leaving { animation: op-leave .45s ease forwards; }
@keyframes op-leave { to { opacity: 0; } }
.op-stage { height: 820px; }



/* ---------- the player (2026-10-22): the stage flows, the transport sits under the frame ---------- */
.op-stage { height: auto !important; min-height: 0; padding-top: 16px; display: flex; flex-direction: column; align-items: stretch; }
.op-scene.is-on { display: block; position: relative; }
.op-foot { position: static !important; margin: 6px 0 0 !important; }
.op-eras { margin: 0; position: static; display: flex; flex-wrap: wrap; gap: 4px; }
.op-player-l { display: flex; align-items: center; gap: 10px; margin-top: 6px; line-height: 22px; }
.op-pvs { margin-left: auto; display: inline-flex; gap: 6px; }
.op-player { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.op-player .op-eras-l { white-space: nowrap; flex-shrink: 0; margin-right: 0; }
.op-pv { flex-shrink: 0; }
.op-pv { width: 22px; height: 22px; border-radius: 9999px; border: 1px solid rgba(var(--accent-cyan-rgb), .55); background: transparent; color: var(--text-primary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.op-pv svg { width: 12px; height: 12px; }
.op-pv:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.op-count { font-family: var(--font-body); font-size: 11px; letter-spacing: .06em; color: var(--accent-cyan); font-variant-numeric: tabular-nums; flex-shrink: 0; margin-right: 4px; white-space: nowrap; }
.op-era { position: relative; overflow: hidden; padding: 3px 8px; font-size: 10px; line-height: 14px; letter-spacing: .08em; white-space: nowrap; transition: border-color .2s, color .2s; }
.op-era::before { content: ''; position: absolute; inset: 0; width: var(--p, 0%); background: rgba(var(--accent-cyan-rgb), .32); transition: width var(--dur, 0ms) linear; pointer-events: none; }
.op-era[aria-pressed="true"] { background: transparent; color: var(--text-primary); border-color: var(--accent-cyan); }
.op-era[aria-pressed="true"]::before { background: rgba(var(--accent-cyan-rgb), .38); }
.op-era > * { position: relative; }
.op-era[disabled] { opacity: .35; cursor: default; }

@media (prefers-reduced-motion: reduce) { .op-era::before { transition: none; } }


/* ---------- the cursor as a fingertip (phone scenes add .op-touch to #op-cursor) ---------- */
.op-cursor .op-cur-touch { display: none; }
.op-cursor.op-touch .op-cur-arrow { display: none; }
.op-cursor.op-touch .op-cur-touch { display: block; }
.op-cursor.op-touch { width: 28px; height: 28px; margin: -14px 0 0 -14px; }
.op-cursor.op-touch.op-press { transform: scale(.72); }

/* ---------- the shared phone frame (Pixel 6 class, 360x800 dp drawn at 5/6) ---------- */
.op-phone { position: relative; width: 320px; height: 687px; margin: 0 auto; background: #0b0b0d; border-radius: 34px; padding: 10px; box-sizing: border-box;
  box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.1), inset 0 0 0 2px #26262b; }
.op-phone-screen { position: relative; width: 300px; height: 667px; border-radius: 26px; overflow: hidden; background: #000; }
.op-phone-cam { position: absolute; top: 10px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #0a0a0c; box-shadow: inset 0 0 0 2px #1d1d22, 0 0 0 1px rgba(255,255,255,.06); z-index: 6; pointer-events: none; }
.op-phone-dp { position: absolute; left: 0; top: 0; width: 360px; height: 800px; transform: scale(.83333); transform-origin: 0 0; }
.op-phone-status { position: absolute; left: 0; top: 0; right: 0; height: 28px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px 0 24px; box-sizing: border-box; font: 500 14px/28px Roboto, "Google Sans", system-ui, sans-serif; letter-spacing: 0; color: #fff; z-index: 5; pointer-events: none; }
.op-phone-status .op-ph-icons { display: inline-flex; gap: 5px; align-items: center; }
.op-phone-status .op-ph-icons i { display: inline-block; width: 14px; height: 14px; background: currentColor; }
.op-phone-status .op-ph-wifi { clip-path: polygon(50% 100%, 0 30%, 15% 18%, 50% 45%, 85% 18%, 100% 30%); }
.op-phone-status .op-ph-cell { clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.op-phone-status .op-ph-batt { width: 8px; height: 13px; border-radius: 2px; }
.op-phone-navbar { position: absolute; left: 50%; bottom: 8px; width: 108px; height: 4px; margin-left: -54px; border-radius: 2px; background: rgba(255,255,255,.85); z-index: 5; pointer-events: none; }


/* ---------- the phones drift: a slow left-to-right slide under a slight, changing perspective ---------- */
.op-scene { perspective: 1600px; perspective-origin: 50% 42%; }
.op-scene.is-on .op-phone, .op-scene.is-on .op-dev { transform-style: preserve-3d; animation: op-phone-drift 30s cubic-bezier(.45,0,.55,1) both; }
@keyframes op-phone-drift {
  from { transform: translateX(-28px) rotateY(10deg) rotateX(2.5deg); }
  to   { transform: translateX(28px) rotateY(-8deg) rotateX(-1.5deg); }
}
html.motion-paused .op-scene.is-on .op-phone, html.motion-paused .op-scene.is-on .op-dev { animation: none; transform: none; }
@media (prefers-reduced-motion: reduce) { .op-scene.is-on .op-phone, .op-scene.is-on .op-dev { animation: none; transform: none; } }


/* ---------- the film (2026-10-23): the scenes live on a 704 px film; on narrow screens the stage
   becomes a window over it and opener.js pans the film to follow the cursor, so a phone sees the
   real UI at 1:1 instead of a shrunken blur. The caption and the chip row stay at window width. */
.op-film { position: relative; width: 704px; will-change: transform; overflow: visible; transition: height .6s cubic-bezier(.2,.7,.2,1), zoom .45s cubic-bezier(.2,.7,.2,1); }   /* the zoom lands first so the rows never dip below the fold mid-change */
.op-scene.is-on { animation: op-scene-in .55s ease both; }
@keyframes op-scene-in { from { opacity: 0; } to { opacity: 1; } }
html.motion-paused .op-film { transition: none; }
html.motion-paused .op-scene.is-on { animation: none; }
@media (prefers-reduced-motion: reduce) { .op-film { transition: none; } .op-scene.is-on { animation: none; } }
@media (max-width: 56.25em) {
  .op-stage { max-width: none; width: 100%; overflow: hidden; padding-top: 12px; }
  .op-film { transition: none; }
  .op-foot { width: auto; max-width: 440px; }
}


/* ---------- the devices (2026-10-24, Justin's pick: the device timeline with the glow) ----------
   opener.js wraps each scene's frame in a device: monitor (2026 desktop apps), tablet (the warehouse,
   the concept), phone (as before), laptop (2013-19), CRT (2004, 2002). Each carries an ambient glow in
   the scene's own colours and shares the phone's slow drift. Hardware chrome, not UI: its radii and
   shadows are the device's own. */
.op-dev { position: relative; margin: 0 auto; width: max-content; }
.op-glow { position: absolute; inset: -60px -80px; z-index: -1; border-radius: 40%; filter: blur(38px); opacity: .7; pointer-events: none;
  background: radial-gradient(60% 55% at 30% 40%, var(--g1, rgba(0,229,255,.5)), transparent 70%), radial-gradient(55% 60% at 75% 60%, var(--g2, rgba(255,0,153,.35)), transparent 70%);
  animation: op-breathe 9s ease-in-out infinite alternate; }
@keyframes op-breathe { from { transform: scale(.96); opacity: .6; } to { transform: scale(1.04); opacity: .8; } }
html.motion-paused .op-glow { animation: none; }
.op-dev-screen { position: relative; overflow: hidden; background: #000; }
.op-dev-screen > * { box-shadow: none !important; margin: 0 !important; }
.op-dev-screen::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.07) 46%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.06) 54%, transparent 62%); background-size: 260% 100%; background-position: 110% 0; animation: op-sweep 14s ease-in-out infinite; }
@keyframes op-sweep { 0%, 55% { background-position: 110% 0; } 85%, 100% { background-position: -10% 0; } }
html.motion-paused .op-dev-screen::after { animation: none; }
/* monitor */
.op-dev-mon .op-dev-body { padding: 8px; background: linear-gradient(180deg, #16161c, #0b0b0f); border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.04); }
.op-dev-mon .op-dev-screen { border-radius: 6px; }
/* stand-less (Justin, 2026-10-24: try it): the neck and foot stay in the markup, hidden, so flipping back is one line */
.op-dev-mon .op-dev-neck, .op-dev-mon .op-dev-foot { display: none; }
.op-dev-mon .op-dev-neck { width: 90px; height: 56px; margin: 0 auto; background: linear-gradient(90deg, #17171d, #34343f, #17171d); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); transform: translateZ(-20px); }
.op-dev-mon .op-dev-foot { width: 300px; height: 16px; margin: 0 auto; border-radius: 50%; background: radial-gradient(ellipse at 50% 30%, #3b3b47, #15151b 70%); box-shadow: 0 0 0 1px rgba(255,255,255,.09), 0 10px 24px rgba(0,0,0,.6); transform: translateZ(-30px); }
/* tablet */
.op-dev-tab .op-dev-body { position: relative; padding: 22px; background: linear-gradient(135deg, #2a2a31, #15151a 60%, #1e1e25); border-radius: 30px; box-shadow: 0 40px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.12); }
.op-dev-tab .op-dev-screen { border-radius: 12px; }
.op-dev-tab .op-dev-cam { position: absolute; left: 9px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #0a0a0c; box-shadow: inset 0 0 0 1.5px #2b2b33; }
/* laptop, hinged */
.op-dev-lap { transform: rotateX(9deg); }
.op-dev-lap .op-dev-lid { position: relative; padding: 14px 14px 20px; background: linear-gradient(180deg, #2a2b30, #141518); border-radius: 12px 12px 3px 3px; box-shadow: 0 0 0 1px rgba(255,255,255,.08); transform-origin: 50% 100%; transform: rotateX(-14deg); }
.op-dev-lap .op-dev-screen { border-radius: 4px; }
.op-dev-lap .op-dev-cam { position: absolute; left: 50%; top: 4px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #0b0b0e; box-shadow: inset 0 0 0 1px #3a3b42; }
.op-dev-lap .op-dev-deck { position: relative; height: 300px; margin-top: -1px; transform-origin: 50% 0; transform: rotateX(76deg); background: linear-gradient(180deg, #2c2d33, #202127 40%, #17181c); border-radius: 0 0 22px 22px; box-shadow: 0 60px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.1); }
.op-dev-lap .op-dev-keys { position: absolute; left: 60px; right: 60px; top: 28px; height: 118px; border-radius: 6px; background: repeating-linear-gradient(90deg, transparent 0 3px, #0e0f12 3px 38px), repeating-linear-gradient(0deg, transparent 0 3px, #0e0f12 3px 24px); background-color: #2a2b31; box-shadow: inset 0 0 0 1px rgba(0,0,0,.6); }
.op-dev-lap .op-dev-pad { position: absolute; left: 50%; top: 170px; width: 200px; height: 90px; margin-left: -100px; border-radius: 8px; background: #26272d; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
/* CRT */
.op-dev-crt .op-dev-case { position: relative; padding: 32px 32px 0; background: linear-gradient(180deg, #e6e0d2, #d2cab7 70%, #c6bda8); border-radius: 22px 22px 10px 10px; box-shadow: 0 40px 90px rgba(0,0,0,.6), inset 0 2px 0 #f5f0e6, 0 0 0 1px rgba(0,0,0,.35); transform-style: preserve-3d; }
.op-dev-crt .op-dev-side { position: absolute; top: 14px; bottom: 14px; left: 100%; width: 150px; background: linear-gradient(90deg, #c3baa5, #a89f8a); transform-origin: 0 50%; transform: rotateY(90deg); border-radius: 0 20px 20px 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.op-dev-crt .op-dev-bezel { padding: 10px; background: linear-gradient(180deg, #cbc3ae, #b7ae99); border-radius: 16px; box-shadow: inset 0 2px 4px rgba(0,0,0,.35), inset 0 -1px 0 rgba(255,255,255,.4); }
.op-dev-crt .op-dev-screen { border-radius: 22px / 18px; box-shadow: inset 0 0 0 8px #141414, inset 0 0 60px rgba(0,0,0,.95); padding: 8px; }
.op-dev-crt .op-dev-screen::before { content: ''; position: absolute; inset: 8px; z-index: 3; pointer-events: none; border-radius: 16px / 12px; background: radial-gradient(120% 90% at 18% 10%, rgba(255,255,255,.22), rgba(255,255,255,0) 45%), repeating-linear-gradient(0deg, rgba(0,0,0,.09) 0 1px, transparent 1px 3px); }
.op-dev-crt .op-dev-chin { height: 58px; display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding-right: 8px; }
.op-dev-crt .op-dev-vent { margin-right: auto; width: 180px; height: 14px; background: repeating-linear-gradient(90deg, #b9b09b 0 3px, transparent 3px 8px); border-radius: 2px; opacity: .7; }
.op-dev-crt .op-dev-pwr { width: 22px; height: 12px; border-radius: 3px; background: linear-gradient(180deg, #d9d2c0, #b7ae99); box-shadow: inset 0 1px 0 #f3eee3, 0 1px 1px rgba(0,0,0,.4); }
.op-dev-crt .op-dev-led { width: 8px; height: 8px; border-radius: 50%; background: #39ff14; box-shadow: 0 0 8px #39ff14; }
.op-dev-crt .op-dev-neck { width: 320px; height: 28px; margin: 0 auto; background: linear-gradient(180deg, #b9b09b, #9c927c); border-radius: 0 0 10px 10px; transform: translateZ(-60px); }
.op-dev-crt .op-dev-foot { width: 420px; height: 70px; margin: -8px auto 0; border-radius: 50%; background: radial-gradient(ellipse at 50% 35%, #d6cfbc, #a99f88 70%); box-shadow: 0 18px 30px rgba(0,0,0,.55); transform: rotateX(72deg) translateZ(-20px); transform-origin: 50% 0; }
/* the screens are the film's width; a frame sized 100% or max-width would otherwise collapse inside the
   max-content device (brainstorm, imagine and the 2013 window shrank to their minimum on the first pass) */
.op-dev-mon .op-dev-screen, .op-dev-tab .op-dev-screen, .op-dev-lap .op-dev-screen { width: 704px; }
.op-dev-screen > .op-bs-frame, .op-dev-screen > .op-im-frame, .op-dev-screen > .op-t13, .op-dev-screen > .op-co-frame, .op-dev-screen > .op-sp-frame, .op-dev-screen > .op-lg-frame, .op-dev-screen > .op-wh-frame { width: 100%; max-width: none; }
.op-dev-crt .op-dev-screen { width: 636px; }
.op-dev-screen > .op-ecard, .op-dev-screen > .op-mysite { width: 100%; max-width: none; }
/* the phones keep their frame and gain the glow */
.op-phone { overflow: visible; }


/* ---------- the year pill (Justin, 2026-10-24): each chip carries its year as a pill inside the pill,
   inverted (cyan fill, dark ink), so the row reads as a timeline newest first ---------- */
.op-era { display: inline-flex; align-items: center; gap: 6px; padding: 2px 2px 2px 8px; }
.op-era-y { display: inline-block; padding: 1px 6px; border-radius: 9999px; background: var(--accent-cyan); color: var(--bg-primary, #0a0a0f); font-size: 9px; line-height: 12px; letter-spacing: .06em; font-weight: 600; }
.op-era[disabled] .op-era-y { background: rgba(var(--accent-cyan-rgb), .5); }

/* the active chip is neon green (Justin, 2026-10-24): outline, progress fill and the year pill */
.op-era[aria-pressed="true"] { border-color: var(--accent-green, #39ff14); }
.op-era[aria-pressed="true"]::before { background: rgba(57, 255, 20, .34); }
.op-era[aria-pressed="true"] .op-era-y { background: var(--accent-green, #39ff14); }


/* ---------- modes (2026-10-24): one player, many homes. data-mode on the stage: cycle (the hero, the
   rules above), once (an embed inside a case study) and watch (the /watch/ page). ---------- */
/* once: no chips, no counter; the scene's own caption is hidden (the figure's caption is the study's);
   the film shrinks to the column (opener.js fitZoom) and a Replay control appears after the run */
.op-stage[data-mode="once"] { max-width: none; justify-self: auto; padding-top: 0 !important; }
.op-stage[data-mode="once"] .op-film { margin: 0 auto; transition: none; }
.op-stage[data-mode="once"] .op-scene .op-foot { display: none; }
.op-player-once { min-height: 30px; justify-content: flex-end; }
.op-replay { display: none; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  padding: 4px 12px 4px 10px; border-radius: 9999px; border: 1px solid rgba(var(--accent-cyan-rgb), .55); background: transparent; color: var(--text-primary); cursor: pointer; line-height: 1.4; }
.op-replay svg { width: 12px; height: 12px; }
.op-replay:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.op-stage.op-played .op-replay { display: inline-flex; }
/* watch: the stage spans the page (1100 max), the film and the rows sit centred at the film's width, and
   the caption block carries the scene's title line big, its sentence, and the link to its study */
.op-stage[data-mode="watch"] { max-width: 1100px; margin: 0 auto; justify-self: auto; padding-top: 0 !important; }   /* the page's own heading sits above it */
.op-stage[data-mode="watch"] .op-film { margin: 0 auto; }
.op-stage[data-mode="watch"] .op-scene .op-foot { display: none; }
.op-stage[data-mode="watch"] .op-player-l, .op-stage[data-mode="watch"] .op-player, .op-watch-cap { width: 100%; max-width: 704px; margin-left: auto; margin-right: auto; }
.op-watch-cap { margin-top: 14px; text-align: left; opacity: 0; transition: opacity .5s ease; }
.op-watch-cap.op-in { opacity: 1; }
.op-watch-t { margin: 0; font-family: var(--font-body); font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--text-primary); }
.op-watch-b { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.op-watch-a { display: inline-flex; align-items: center; margin-top: 10px; font-family: var(--font-body); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  padding: 4px 12px; border-radius: 9999px; border: 1px solid rgba(var(--accent-cyan-rgb), .55); color: var(--text-primary); text-decoration: none; line-height: 1.4; }
.op-watch-a:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.op-watch-a[hidden] { display: none; }
@media (max-width: 56.25em) { .op-watch-t { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { .op-watch-cap { transition: none; } }