/* Will Pearson tour interface — shared theme for all tours on the 1.24 player.
   Direction agreed 2026-08-26: dark branded splash; in-tour light pills over
   the image; bare wordmark top-left; title pill top-right; plain "i" info
   glyph. Gigapixel and 360 variants differ in controls and splash copy
   (wp-ui.js sets data-wp-variant on the root).

   Tokens up top — tweak here first. */

:root {
  --wp-ink: #151515;
  --wp-mid: #555555;
  --wp-faint: #adadad;
  --wp-pill-bg: rgba(255, 255, 255, 0.92);
  --wp-pill-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  --wp-dark-bg: rgba(17, 17, 17, 0.62);
  --wp-dark-bg-hover: rgba(17, 17, 17, 0.82);
  --wp-accent: #d9b64a;
  --wp-splash-bg: rgba(11, 11, 11, 0.8);
  --wp-track: 0.18em;
  --wp-radius: 999px;
}

/* Latin subsets of the theme's Futura files (2026-09-05): same outlines, a third of the bytes. */
@font-face {
  font-family: 'WP Futura';
  src: url('/wp-content/themes/will-pearson/assets/fonts/futura/FuturaLight.woff2') format('woff2');
  font-weight: 300; font-display: swap;
}
@font-face {
  font-family: 'WP Futura';
  src: url('/wp-content/themes/will-pearson/assets/fonts/futura/FuturaBook.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'WP Futura';
  src: url('/wp-content/themes/will-pearson/assets/fonts/futura/FuturaMedium.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}

.wp-ui, .wp-ui * { box-sizing: border-box; font-family: 'WP Futura', Futura, 'Century Gothic', sans-serif; }
.wp-ui button { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; }
.wp-ui button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }
.wp-ui .wp-pill:focus-visible, .wp-ui .wp-ctl:focus-visible { outline-offset: 2px; }

/* ---------- in-tour chrome ---------- */

.wp-chrome {
  position: fixed; inset: 0; pointer-events: none; z-index: 20;
  opacity: 0; transition: opacity 0.9s ease;
}
.wp-chrome.wp-chrome-in { opacity: 1; }
/* "< interactive >" badge — quiet marker while the tour is untouched */
.wp-int-badge {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.3em; text-indent: 0.3em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  pointer-events: none; transition: opacity 0.6s ease;
}
.wp-int-badge.wp-gone { opacity: 0; }

/* popups fade the interface away; declared after -in so it wins */
.wp-chrome.wp-chrome-dim { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
@media (prefers-reduced-motion: reduce) { .wp-chrome { transition: none; } }
.wp-chrome > * { pointer-events: auto; }

.wp-logo {
  position: absolute; top: 20px; left: 20px; z-index: 2; /* rides above the drawer */
  display: flex; align-items: center; min-height: 44px;
}
.wp-logo a { display: flex; align-items: center; min-height: 44px; }
.wp-logo a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 4px; }
.wp-logo img {
  height: 20px; width: auto;
  filter: drop-shadow(0 1px 8px rgba(255, 255, 255, 0.45));
}

.wp-title {
  position: absolute; top: 20px; right: 20px;
  display: flex; align-items: center; min-height: 48px; padding: 0 26px;
  background: var(--wp-dark-bg); border-radius: 10px;
  backdrop-filter: blur(6px);
  max-width: min(56vw, 560px);
}
.wp-title span {
  font-size: 13px; font-weight: 500; letter-spacing: var(--wp-track);
  text-transform: uppercase; color: #ffffff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.wp-controls {
  position: absolute; right: 20px; bottom: 20px;
  display: flex; gap: 5px;
}
.wp-ui .wp-ctl {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--wp-dark-bg); backdrop-filter: blur(6px);
  color: #ffffff;
}
.wp-ctl:hover { background: var(--wp-dark-bg-hover); }
.wp-ctl svg { display: block; stroke: currentColor; }
.wp-ctl .wp-i-glyph {
  font-size: 18px; font-weight: 500; line-height: 1;
  font-family: 'WP Futura', Futura, 'Century Gothic', sans-serif; font-style: normal;
}
/* no special pressed look (owner ask 2026-09-03): the grid toggle matches
   its siblings exactly, hover included; aria-pressed carries the state */

/* Share pill — icon + label, opens the 360Build Share plugin's panel */
.wp-ui .wp-ctl-share {
  width: auto; border-radius: 999px; padding: 0 22px 0 18px; gap: 10px;
}
.wp-ctl-share .wp-ctl-label {
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase;
}
/* #wp-about is the panorama's text description, the equivalent of an image alt: read by
   screen readers and crawlers, referenced by #pano via aria-describedby, and kept off
   screen with .wp-sr-only (not display:none, which would hide it from assistive tech too). */
/* the plugin draws its own corner button; our pill is the launcher */
.s360-btn { display: none !important; }

/* ---------- share panel, re-dressed ----------
   The 360Build Share plugin injects its own white-card styles at runtime;
   these body-prefixed rules outweigh them and re-dress the panel in the
   info dialog's cinematic language — full-screen dark blur, tracked caps
   with gold rules, ghost fields. Brand-coloured network circles keep their
   colours (the plugin's attribute selectors outrank these). */
@keyframes wp-fade-in { from { opacity: 0; } to { opacity: 1; } }
body .s360-overlay {
  background: var(--wp-splash-bg); backdrop-filter: blur(10px);
  animation: wp-fade-in 0.3s ease;
}
@media (prefers-reduced-motion: reduce) { body .s360-overlay { animation: none; } }
body .s360-panel {
  background: none; box-shadow: none; border-radius: 0; overflow: visible;
  width: min(560px, 100%); padding: 0; color: #ffffff; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  font-family: 'WP Futura', Futura, 'Century Gothic', sans-serif;
}
body .s360-title {
  display: flex; align-items: center; gap: 22px; margin: 0 0 34px; padding: 0;
  font-size: 13px; font-weight: 300; letter-spacing: 0.55em; text-indent: 0.55em;
  text-transform: uppercase; color: #ffffff;
}
body .s360-title::before, body .s360-title::after {
  content: ''; display: block; width: 56px; height: 1px;
  background: rgba(217, 182, 74, 0.75);
}
body .s360-close {
  position: fixed; top: 20px; right: 20px; width: 44px; height: 44px;
  background: none; color: rgba(255, 255, 255, 0.7);
}
body .s360-close:hover { background: none; color: #ffffff; }
body .s360-targets { overflow-x: visible; justify-content: center; gap: 10px; margin: 0 0 28px; padding: 0; }
body .s360-target { color: rgba(255, 255, 255, 0.75); }
body .s360-circle { background: rgba(255, 255, 255, 0.12); color: #ffffff; }
body .s360-linkrow { width: min(440px, 100%); }
body .s360-url {
  border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 3px;
  background: rgba(255, 255, 255, 0.06); color: #ffffff;
}
body .s360-copy {
  background: none; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 3px;
  color: #ffffff; font-weight: 400; letter-spacing: 0.08em;
}
body .s360-copy:hover { border-color: var(--wp-accent); color: var(--wp-accent); }
body .s360-copied { background: var(--wp-accent); border-color: var(--wp-accent); color: var(--wp-ink); }
body .s360-copied:hover { color: var(--wp-ink); }
body .s360-startview { color: rgba(255, 255, 255, 0.75); justify-content: center; }
body .s360-startview input { accent-color: var(--wp-accent); }

/* ---------- thumbnails (360 multi-scene) ----------
   Full-height drawer sliding in from the left (owner mock 2026-09-02):
   horizontal rows — thumb, label, chevron — open on arrival; picking a
   scene closes it. The grid control bottom-right reopens it. */

.wp-thumbs {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: min(300px, 82vw);
  display: flex; overflow-y: auto; overscroll-behavior: contain;
  padding: 76px 12px 20px 16px; /* rows start below the wordmark */
  background: var(--wp-dark-bg); backdrop-filter: blur(10px);
  transform: translateX(-100%); visibility: hidden;
  transition: transform 0.35s ease, visibility 0s linear 0.35s;
}
.wp-thumbs.wp-open {
  transform: none; visibility: visible;
  transition: transform 0.35s ease;
}
@media (prefers-reduced-motion: reduce) { .wp-thumbs, .wp-thumbs.wp-open { transition: none; } }
.wp-thumbs-row { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.wp-ui .wp-thumb {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 52px; padding: 6px 8px; border-radius: 8px;
  text-align: left;
}
.wp-ui .wp-thumb:hover { background: rgba(255, 255, 255, 0.08); }
/* .wp-thumb .wp-thumb-img outweighs the label's .wp-thumb span flex:1 —
   both children are spans */
.wp-thumb .wp-thumb-img {
  display: block; flex: 0 0 auto;
  width: 64px; height: 36px; border-radius: 4px; /* 16:9 */
  border: 1px solid rgba(255, 255, 255, 0.25);
  background-size: cover; background-position: center;
}
.wp-thumb span {
  flex: 1; min-width: 0;
  font-size: 13px; font-weight: 400; letter-spacing: 0.04em;
  color: var(--wp-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wp-thumb .wp-thumb-go { flex: 0 0 auto; stroke: rgba(255, 255, 255, 0.4); }
.wp-thumb[aria-current="true"] { background: rgba(255, 255, 255, 0.14); }
.wp-thumb[aria-current="true"] .wp-thumb-img { border-color: #ffffff; }
.wp-thumb .wp-thumb-img { flex: 0 0 auto; }
.wp-thumb[aria-current="true"] span { color: #ffffff; }

/* ---------- scene arrows (360 multi-scene) ---------- */

/* prev/next centred at the bottom, side by side */
.wp-ui .wp-scene-arrow {
  position: absolute; bottom: 20px;
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--wp-dark-bg); backdrop-filter: blur(6px); color: #ffffff;
}
.wp-scene-arrow:hover { background: var(--wp-dark-bg-hover); }
.wp-scene-arrow svg { display: block; stroke: currentColor; }
/* 5px gap — matches the control cluster's spacing */
.wp-scene-prev { left: calc(50% - 50.5px); }
.wp-scene-next { left: calc(50% + 2.5px); }

/* ---------- info dialog ----------
   "Cinematic splash" direction (owner pick 2026-09-02,
   design/info-popup-directions.html option B): a full-screen takeover in
   the splash's own language — blurred dark scrim, gold side rules, tracked
   caps, one summary line, ghost keycaps. No card. */

.wp-scrim {
  position: fixed; inset: 0; z-index: 30;
  background: var(--wp-splash-bg);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.3s ease;
}
.wp-scrim.wp-scrim-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .wp-scrim { transition: none; } }
.wp-dialog {
  position: static; width: min(560px, calc(100vw - 48px));
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.wp-dialog h2 {
  margin: 0; display: flex; align-items: center; gap: 22px;
  font-size: 13px; font-weight: 300;
  letter-spacing: 0.55em; text-indent: 0.55em; text-transform: uppercase; color: #ffffff;
}
.wp-dialog h2::before, .wp-dialog h2::after {
  content: ''; display: block; width: 56px; height: 1px;
  background: rgba(217, 182, 74, 0.75);
}
.wp-dialog-head { display: none; } /* rules live on the h2 pseudo-elements */
.wp-dialog-summary {
  margin: 34px 0 0; max-width: 440px;
  font-size: 14.5px; font-weight: 300; line-height: 1.7; color: rgba(255, 255, 255, 0.75);
}
.wp-dialog-kicker {
  margin-top: 40px; font-size: 11px; font-weight: 500;
  letter-spacing: 0.3em; text-indent: 0.3em; text-transform: uppercase; color: var(--wp-accent);
}
.wp-dialog-keys {
  margin: 20px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 44px;
}
.wp-dialog-keys > div { display: flex; align-items: center; gap: 10px; }
.wp-dialog-keys dt { margin: 0; flex: 0 0 auto; display: flex; gap: 4px; }
.wp-dialog-keys dd { margin: 0; font-size: 13px; font-weight: 300; color: rgba(255, 255, 255, 0.6); text-align: left; }
.wp-dialog-keys kbd {
  display: inline-block; min-width: 28px; padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 3px;
  background: none; text-align: center;
  font-family: 'WP Futura', Futura, 'Century Gothic', sans-serif;
  font-size: 11.5px; font-weight: 400; letter-spacing: 0.08em; color: #ffffff;
}
.wp-dialog-esc {
  margin-top: 44px; font-size: 10px; font-weight: 300;
  letter-spacing: 0.26em; text-indent: 0.26em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.wp-ui .wp-dialog-close {
  position: fixed; top: 20px; right: 20px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, 0.7);
}
.wp-dialog-close:hover { color: #ffffff; }
.wp-dialog-close svg { stroke: currentColor; }
.wp-dialog-close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* dialog scrolls on small screens */
.wp-scrim { overflow-y: auto; }
.wp-dialog { margin: auto; padding: 64px 0; }
@media (max-width: 640px) {
  .wp-dialog-keys { grid-template-columns: 1fr; gap: 11px; }
  .wp-dialog h2::before, .wp-dialog h2::after { width: 30px; }
}

/* ---------- splash ---------- */

.wp-splash {
  position: fixed; inset: 0; z-index: 40;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--wp-splash-bg);
  backdrop-filter: blur(10px);
  transition: opacity 1.1s ease;
}
.wp-splash.wp-leaving { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .wp-splash { transition: none; } }

.wp-splash img { height: 38px; width: auto; filter: invert(1); }
.wp-splash-title {
  margin-top: 28px; font-size: 13px; font-weight: 500; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--wp-faint); text-align: center; padding: 0 24px;
}
/* slim underline directly beneath the format line (owner mock 2026-09-02) */
.wp-splash-bar {
  margin-top: 10px; width: 160px; max-width: 60vw; height: 2px;
  background: rgba(255, 255, 255, 0.3); position: relative;
}
.wp-splash-bar i {
  position: absolute; left: 0; top: 0; height: 2px; width: 0%; background: #ffffff;
  transition: width 0.3s ease, opacity 0.8s ease;
}
.wp-splash-bar.wp-done i { opacity: 0; }
.wp-splash-sub {
  margin-top: 24px; font-size: 11px; font-weight: 300; letter-spacing: 0.16em;
  text-transform: uppercase; color: #757575;
}
.wp-ui .wp-splash-enter {
  margin-top: 30px; display: flex; align-items: center; justify-content: center; gap: 22px;
  min-height: 48px; padding: 0 24px;
  color: #ffffff; font-size: 13px; font-weight: 300;
  letter-spacing: 0.55em; text-indent: 0.55em; text-transform: uppercase;
  transition: letter-spacing 0.6s ease, text-indent 0.6s ease;
}
.wp-ui .wp-splash-enter::before, .wp-ui .wp-splash-enter::after {
  content: ''; display: block; width: 56px; height: 1px;
  background: rgba(217, 182, 74, 0.75); transition: background 0.4s ease, width 0.6s ease;
}
.wp-ui .wp-splash-enter:hover { letter-spacing: 0.7em; text-indent: 0.7em; }
.wp-ui .wp-splash-enter:hover::before, .wp-ui .wp-splash-enter:hover::after {
  background: var(--wp-accent); width: 72px;
}
@media (prefers-reduced-motion: reduce) {
  .wp-ui .wp-splash-enter, .wp-ui .wp-splash-enter::before, .wp-ui .wp-splash-enter::after { transition: none; }
}

/* ---------- small screens ---------- */

@media (max-width: 640px) {
  .wp-logo img { height: 14px; }
  .wp-title { max-width: 52vw; padding: 0 16px; }
  .wp-ctl { width: 44px; height: 44px; }
  .wp-ui .wp-scene-arrow { width: 44px; height: 44px; }
  .wp-scene-prev { left: calc(50% - 46.5px); }
  .wp-scene-next { left: calc(50% + 2.5px); }
  .wp-thumbs { width: min(280px, 85vw); }
  .wp-splash img { height: 28px; }
}

/* visually hidden heading: present for assistive tech and crawlers, not drawn */
.wp-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}