html:not([data-experience="fun"]) [data-experience-only="fun"],
html[data-experience="fun"] [data-experience-only="normal"] {display:none!important;}
.experience-bar {background:var(--slate);color:var(--sand);border-bottom:1px solid #ffffff20;}
.experience-options {display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px;font-size:14px;}
.experience-options > span {margin-right:auto;}
.experience-options a {color:var(--sand);padding:7px 16px;border:1px solid #ffffff40;border-radius:6px;font-weight:500;}
.experience-options a[aria-current] {background:var(--sand);color:var(--slate);border-color:var(--sand);}
.experience-options a:hover {border-color:var(--amber);}
.experience-options a:focus-visible {outline-color:var(--amber);}
.word-home {max-width:1200px;margin:32px auto;padding:0 20px;}
.word-next {display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:24px;font-size:16px;}
html:not([data-experience="fun"]) .discovery-workspace > :not(#profile-results) {display:none!important;}
html:not([data-experience="fun"]) #profile-results > :not(.discovery-profile) {display:none;}
html:not([data-experience="fun"]) #profile-results {display:block!important;border:0;background:transparent;box-shadow:none;}
html:not([data-experience="fun"]) .discovery-workspace {max-width:1200px;margin:auto;}
html:not([data-experience="fun"]) .discovery-profile {padding:32px 0;}
html:not([data-experience="fun"]) .activity-note {display:none;}
html:not([data-experience="fun"]) .activity-explorer {max-width:1160px;}
@media(max-width:500px) {.experience-options {gap:7px;}.experience-options > span {flex-basis:100%;}.word-home {padding:0 10px;margin-top:18px;}}
.discovery-profile {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);max-width:none;align-items:start;}
.about-copy {min-width:0;}
.about-photo {margin:0;position:sticky;top:24px;}
.about-photo img {display:block;width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--shadow);}
@media(max-width:800px) {.discovery-profile {grid-template-columns:1fr;}.about-photo {position:static;}}

/* ---------- About photo: full height, dissolving into the text ---------- */
/* The photo fills the right half of the screen and stays put while the text
   scrolls past, fading out softly where it meets the text. On arrival it starts pseudonymized — blurred, grey, labelled
   Highly Confidential — and a scan line decodes it to Public. */

.about-photo { position: relative; }
.photo-veil, .photo-scan, .photo-label-before { display: none; }
.photo-label {
  position: absolute; top: 16px; right: 16px;
  display: inline-flex; align-items: center; gap: .5em;
  padding: .4em .85em; border-radius: 999px;
  background: rgba(17, 26, 53, .72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; font: 600 12px/1.2 "DM Sans", sans-serif; letter-spacing: .02em;
}
.photo-label-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sage); flex: none; }
.photo-label-text { display: grid; }
.photo-label-text > span { grid-area: 1 / 1; }

html:not([data-experience="fun"]) .discovery-shell { overflow-x: clip; }
/* the eDiscovery panel clips its content; in normal mode there is no panel,
   and overflow:hidden would pin the sticky photo to it and cut off the bleed */
html:not([data-experience="fun"]) #profile-results { overflow: visible; }

@media (min-width: 900px) {
  html:not([data-experience="fun"]) .about-photo {
    position: sticky; top: 73px; align-self: start;
    height: calc(100vh - 73px);
    width: calc(56vw - clamp(12px, 2vw, 24px));
    margin-left: -6vw;
    -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,.15) 12%, rgba(0,0,0,.55) 28%, #000 46%);
    mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,.15) 12%, rgba(0,0,0,.55) 28%, #000 46%);
  }
  html:not([data-experience="fun"]) .about-photo img {
    width: 100%; height: 100%; object-fit: cover; object-position: 68% 30%;
    border-radius: 0; box-shadow: none; transform-origin: 70% 30%;
  }
  html:not([data-experience="fun"]) .photo-label { top: 24px; right: 24px; }
}

@media (max-width: 899px) {
  html:not([data-experience="fun"]) .discovery-profile { grid-template-columns: 1fr; }
  html:not([data-experience="fun"]) .about-photo {
    order: -1; position: relative; top: auto;
    width: 100vw; margin-left: calc(50% - 50vw);
    height: 58vh; min-height: 320px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 52%, rgba(0,0,0,.55) 74%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 52%, rgba(0,0,0,.55) 74%, transparent 100%);
  }
  html:not([data-experience="fun"]) .about-photo img {
    width: 100%; height: 100%; object-fit: cover; object-position: 72% 25%;
    border-radius: 0; box-shadow: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html.motion-enabled:not([data-experience="fun"]) .photo-veil {
    display: block; position: absolute; inset: 0; pointer-events: none;
    background: rgba(17, 26, 53, .28);
    -webkit-backdrop-filter: blur(14px) grayscale(1) contrast(1.1);
    backdrop-filter: blur(14px) grayscale(1) contrast(1.1);
    animation: photo-veil 1.6s cubic-bezier(.6, 0, .2, 1) .6s both;
  }
  html.motion-enabled:not([data-experience="fun"]) .photo-scan {
    display: block; position: absolute; top: 0; bottom: 0; left: 100%; width: 100%;
    pointer-events: none;
    animation: photo-scan 1.6s cubic-bezier(.6, 0, .2, 1) .6s both;
  }
  html.motion-enabled:not([data-experience="fun"]) .photo-scan::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px;
    background: var(--amber); box-shadow: 0 0 18px 5px rgba(32, 216, 209, .55);
  }
  html.motion-enabled:not([data-experience="fun"]) .photo-label-before { display: inline; animation: label-out 1.6s .6s both; }
  html.motion-enabled:not([data-experience="fun"]) .photo-label-after  { animation: label-in 1.6s .6s both; }
  html.motion-enabled:not([data-experience="fun"]) .photo-label-dot    { animation: label-dot 1.6s .6s both; }
}

@keyframes photo-veil { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 100% 0 0); } }
@keyframes photo-scan { 0% { transform: translateX(0); opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(-100%); opacity: 0; } }
@keyframes label-out  { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes label-in   { 0%, 80% { opacity: 0; } 100% { opacity: 1; } }
@keyframes label-dot  { 0%, 80% { background: var(--rust); } 100% { background: var(--sage); } }

/* A slow drift while you read, where the browser supports scroll-driven animation. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
    html.motion-enabled:not([data-experience="fun"]) .about-photo img { animation: photo-drift linear both; animation-timeline: scroll(root); }
  }
}
@keyframes photo-drift { from { transform: scale(1.12); } to { transform: scale(1); } }