/* KFFART V7.2 — source-pixel registered interactive objects in About Me.
 * Three layers are registered against a single 1672×940 Earth-study image.
 * No animated object motion: an exact image always covers itself.
 * Z-order (within photo plane): map 2, telescope 3, laptop 9.
 */
#detail-view.about-view .about-hero{
  position:absolute!important;
  top:clamp(13px,2.1vw,30px)!important;
  left:clamp(10px,1.5vw,25px)!important;
  margin:0!important;
  width:min(520px,34%)!important;
  z-index:15!important;
}
#detail-view.about-view .about-hero h1{
  font-size:clamp(60px,6.7vw,118px)!important;
  margin:19px 0 2px!important;
}
#detail-view.about-view .about-hero h1 span{
  font-size:clamp(34px,4.05vw,67px)!important;
  line-height:1.16;
}
#detail-view.about-view .about-lead{
  margin:10px 0 8px!important;
  font-size:clamp(16px,1.35vw,21px)!important;
  line-height:1.5!important;
}
#detail-view.about-view .about-intro{
  font-size:clamp(11px,.87vw,14px)!important;
  line-height:1.8!important;
}
#detail-view.about-view .about-hero-actions{margin-top:17px!important;}
/* Physical source-space plane follows the same background-size: cover and
   background-position as the unmodified generated illustration. */
.about-object-world{
  position:absolute;
  width:1672px;height:940px;
  top:0;left:0;
  transform-origin:top left;
  z-index:6;
  pointer-events:none;
  overflow:visible;
}
.about-object{
  position:absolute;
  padding:0;border:0;margin:0;
  color:inherit;background:transparent;
  display:block;
  cursor:pointer;
  pointer-events:auto;
  -webkit-tap-highlight-color:transparent;
  -webkit-appearance:none;
  appearance:none;
  isolation:isolate;
  transform:none!important;
}
.about-object--map{left:425px;top:162px;width:453px;height:311px;z-index:2;}
.about-object--laptop{left:603px;top:442px;width:151px;height:104px;z-index:9;}
.about-object--telescope{left:1010px;top:320px;width:230px;height:117px;z-index:3;}
.about-object img{
  width:100%;height:100%;object-fit:fill;
  display:block;max-width:none;
  pointer-events:none;
  /* Effects add light; no translation, scale, skew or perspective on the image. */
  transition:filter .22s ease;
}
.about-object:hover img,
.about-object:focus-visible img{
  filter:brightness(1.09) drop-shadow(0 0 7px rgba(255,215,146,.8));
}
.about-object:focus-visible{
  outline:3px solid #fff0c5;
  outline-offset:4px;
  border-radius:5px;
}
.about-object-marker{
  position:absolute;right:8px;top:8px;
  display:flex;align-items:center;justify-content:center;
  width:27px;height:27px;
  border:1px solid #ffdcaa;
  border-radius:50%;font-size:15px;
  line-height:1;
  color:#fff4d7;
  background:rgba(11,27,36,.8);
  box-shadow:0 0 12px #eab67372, inset 0 0 4px #eab67369;
  animation:about-marker-twinkle 2.4s ease-in-out infinite;
  pointer-events:none;
  z-index:2;
}
.about-object--map .about-object-marker{right:18px;top:29px;}
.about-object--laptop .about-object-marker{right:-6px;top:-12px;}
.about-object--telescope .about-object-marker{right:9px;top:3px;}
@keyframes about-marker-twinkle{
  0%,100%{box-shadow:0 0 6px #f8c58b70;opacity:.8}
  50%{box-shadow:0 0 23px #f8ce8be3;opacity:1}
}
/* Floating copy sits beside EACH physical object in the world coordinate plane.
   These do not intercept object clicks and automatically follow scene scaling. */
.about-object-caption{
  position:absolute;
  width:202px;min-height:78px;
  box-sizing:border-box;
  padding:11px 13px;
  pointer-events:none;
  z-index:16;
  border:1px solid rgba(241,197,128,.58);
  border-radius:12px;
  color:#f8ead1;
  background:linear-gradient(145deg,rgba(10,29,37,.91),rgba(20,40,46,.87));
  box-shadow:0 12px 28px #04101894,inset 0 1px 0 #fff3cc22;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.about-object-caption--map{left:892px;top:185px;}
.about-object-caption--laptop{left:762px;top:497px;}
.about-object-caption--telescope{left:1251px;top:318px;}
.about-object-caption .caption-heading{
  display:flex;align-items:center;gap:7px;
  letter-spacing:.09em;font-size:12px;
  font-weight:750;color:#ffe0a1;
  white-space:nowrap;
}
.about-object-caption .caption-heading::before{
  content:"";width:6px;height:6px;
  flex:none;border-radius:50%;background:#ffd391;
  box-shadow:0 0 11px #ffc97a;
}
.about-object-caption .caption-subtitle{
  font-size:11px;line-height:1.5;letter-spacing:.02em;
  margin-top:7px;
  color:#c8e6e7;
  transition:opacity .18s ease;
}
.about-object-caption .caption-subtitle.is-transitioning{opacity:.15;}
.about-object-caption[aria-current="true"]{
  border-color:#ffe1aa;
  box-shadow:0 0 25px #e9ae7538,0 12px 28px #0410189c;
}
.about-object-caption--map::before,
.about-object-caption--laptop::before,
.about-object-caption--telescope::before{
  content:"";position:absolute;top:19px;left:-21px;
  width:19px;height:1px;background:#ffe2a4;
  box-shadow:0 0 9px #edc18a;
}
#detail-view.about-view .about-explore{
  /* Keep the supporting text panel but remove desktop's second 3-button bar. */
  width:min(310px,27vw);
  right:25px;bottom:36px;
  z-index:11;
}
#detail-view.about-view .about-explore-nav,
#detail-view.about-view .about-explore-kicker{display:none!important;}
#detail-view.about-view .about-insight{
  border-color:#ebc68e7a;background:rgba(9,25,31,.87);
  min-height:90px;
  padding:13px 15px;
}
#detail-view.about-view .about-insight-title{font-size:15px;}
#detail-view.about-view .about-insight-body{font-size:11px;line-height:1.7;}
/* Screen readers and touch-only visitors retain the three accessible classic tabs.
   On narrow screens, world-plane elements move with photo cover, but offscreen
   objects still have explicit touch access via this compact fallback bar. */
@media(max-width:730px){
 #detail-view.about-view .about-hero{
  top:12px!important;left:12px!important;right:12px!important;
  width:auto!important;
 }
 #detail-view.about-view .about-hero h1{font-size:clamp(52px,12vw,72px)!important;margin:10px 0 2px!important;}
 #detail-view.about-view .about-hero h1 span{font-size:clamp(30px,7vw,43px)!important;}
 #detail-view.about-view .about-hero .about-lead{font-size:15px!important;line-height:1.38!important;margin:7px 0!important;}
 #detail-view.about-view .about-hero .about-intro{max-width:325px;font-size:11px!important;line-height:1.5!important;}
 #detail-view.about-view .about-hero-actions{margin-top:12px!important;}
 #detail-view.about-view .about-explore{width:auto;left:14px;right:14px;bottom:75px;z-index:15;}
 #detail-view.about-view .about-explore-nav{display:flex!important;}
 #detail-view.about-view .about-insight{padding:10px 12px;min-height:56px;margin-top:8px;}
 #detail-view.about-view .about-insight-title{font-size:13px;}
 #detail-view.about-view .about-insight-body{font-size:10px;line-height:1.5;}
 .about-object-caption{display:none!important;}
 .about-object-marker{animation:none;}
}
@media(prefers-reduced-motion:reduce){
 .about-object img,.about-object-caption .caption-subtitle{transition:none!important;}
 .about-object-marker{animation:none!important;}
}
body.journey-motion-paused .about-object-marker{animation-play-state:paused!important;}

/* V7.2 optical integration: place registered image pixels below ONE consistent
   scene-wide light treatment to avoid rectangular over-bright pasted patches.
   Interactive labels and markers remain above that grading layer. */
#detail-view.about-view .about-scene{
  background-image:
    url('study-1672.webp'),
    url('../about-me-v1/about-study-1920.webp')!important;
}
#detail-view.about-view .about-scene::before{
  z-index:7!important;
  background:
    linear-gradient(90deg,rgba(4,15,26,.89) 0%,rgba(6,19,28,.67) 25%,rgba(8,25,35,.22) 47%,rgba(8,24,36,.06) 100%),
    linear-gradient(0deg,rgba(6,14,25,.38),transparent 32%),
    radial-gradient(circle at 72% 48%,rgba(240,179,99,.16),transparent 34%),
    radial-gradient(circle at 24% 75%,rgba(33,85,98,.13),transparent 35%);
}
#detail-view.about-view .about-scene::after{z-index:8!important;}
.about-object-world{z-index:5!important;}
.about-object-ui-world{
  position:absolute;
  width:1672px;height:940px;
  top:0;left:0;transform-origin:top left;
  z-index:12;pointer-events:none;
}
.about-object-ui-world .about-object-marker{
  position:absolute;
}
.about-object-ui-world .about-object-marker--map{left:833px;top:191px;}
.about-object-ui-world .about-object-marker--laptop{left:733px;top:430px;}
.about-object-ui-world .about-object-marker--telescope{left:1204px;top:323px;}
.about-object-ui-world .about-object-marker[data-selected="true"]{
  background:rgba(72,43,19,.85);color:#fff;
}
@media(max-width:730px){
 #detail-view.about-view .about-scene{
   background-image:
     url('study-1672.webp'),
     url('../about-me-v1/about-study-1280.webp')!important;
 }
 #detail-view.about-view .about-scene::before{
   background:
     linear-gradient(180deg,rgba(4,14,23,.94) 0%,rgba(4,15,24,.78) 24%,rgba(3,13,19,.16) 64%,rgba(5,15,23,.56) 100%);
 }
}

/* Final optical lock: sample the exact SAME WebP image as the page background.
   The isolated object PNGs supply the RANSAC-registered alpha masks. This
   produces 0 changed RGB pixels when foreground objects are simply present
   at native 1672×940 resolution (verified in Chromium). */
.about-object img{opacity:0!important;}
.about-object::before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background-image:url('study-1672.webp');
  background-size:1672px 940px;
  background-repeat:no-repeat;
  mask-repeat:no-repeat;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;
  transition:filter .2s ease;
}
.about-object--map::before{
  background-position:-425px -162px;
  mask-image:url('map-alpha-mask.png');
  -webkit-mask-image:url('map-alpha-mask.png');
}
.about-object--laptop::before{
  background-position:-603px -442px;
  mask-image:url('laptop-alpha-mask.png');
  -webkit-mask-image:url('laptop-alpha-mask.png');
}
.about-object--telescope::before{
  background-position:-1010px -320px;
  mask-image:url('telescope-alpha-mask.png');
  -webkit-mask-image:url('telescope-alpha-mask.png');
}
.about-object:hover::before,
.about-object:focus-visible::before{
  filter:brightness(1.16) drop-shadow(0 0 12px rgba(255,210,148,.65));
}
@media(prefers-reduced-motion:reduce){.about-object::before{transition:none!important;}}

/* One durable project-local photo powers About and its flight destination. */
#about-flight .about-flight-interior{
  background-image:
    linear-gradient(90deg,rgba(4,15,26,.89) 0%,rgba(6,19,28,.67) 25%,rgba(8,25,35,.22) 47%,rgba(8,24,36,.06) 100%),
    linear-gradient(0deg,rgba(6,14,25,.38),transparent 32%),
    url('study-1672.webp'),
    url('../about-me-v1/about-study-1920.webp')!important;
  background-position:center center!important;
  background-size:cover!important;
}
@media(max-width:730px){
  #about-flight .about-flight-interior{
    background-image:
      linear-gradient(180deg,rgba(4,14,23,.94) 0%,rgba(4,15,24,.78) 24%,rgba(3,13,19,.16) 64%,rgba(5,15,23,.56) 100%),
      url('study-1672.webp'),
      url('../about-me-v1/about-study-1280.webp')!important;
    background-position:62% center!important;
    background-size:cover!important;
  }
}