/* KFFART V7.0 | World 05: the Personal Observatory / About Me.
   A different visual language from AI Journey: a warm timber study, cartography,
   notebooks and a telescope taken from the EXISTING approved About orb artwork.
   Isolated to About route; production website is not modified. */

#detail-view.about-view{
  min-height:100svh;
  padding:0!important;
  margin:0!important;
  background:#111c23!important;
  color:#f6f2e8;
  overflow:hidden;
}
body:has(#detail-view.about-view:not([hidden])) #topbar,
body:has(#detail-view.about-view:not([hidden])) #mobile-menu,
body:has(#detail-view.about-view:not([hidden])) .footer{
  display:none!important;
}
.about-scene,.about-flight-interior{
  background-image:
    linear-gradient(90deg,rgba(7,17,23,.96) 0%,rgba(8,20,27,.92) 20%,rgba(10,21,27,.73) 37%,rgba(10,20,24,.18) 67%,rgba(8,19,26,.22) 100%),
    linear-gradient(0deg,rgba(6,15,19,.72) 0%,transparent 28%,transparent 70%,rgba(8,14,24,.23)),
    url('about-study-1920.webp')!important;
  background-position:center center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
}
.about-scene{
  position:relative;
  isolation:isolate;
  width:100%;height:100svh;min-height:720px;
  overflow:hidden;
  display:flex;align-items:center;
  border-bottom:1px solid #debb8566;
}
.about-scene::before{
  content:"";position:absolute;inset:0;
  z-index:-1;pointer-events:none;
  background:
     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%);
}
.about-scene::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(4,13,18,.58) 0%,transparent 13%,transparent 88%,rgba(4,11,16,.16));
}
.about-glint{
  position:absolute;pointer-events:none;z-index:2;
  width:5px;height:5px;border-radius:50%;
  background:#ffdda2;box-shadow:0 0 12px #f9c784,0 0 37px #ffa544;
  animation:about-glimmer 5s ease-in-out infinite alternate;
}
.about-glint.one{left:77%;top:39%;}
.about-glint.two{left:91%;top:62%;animation-delay:-2.2s;width:3px;height:3px;}
@keyframes about-glimmer{0%{opacity:.28;transform:scale(.8)}100%{opacity:1;transform:scale(1.75)}}
.about-hero{
  position:relative;z-index:4;
  width:min(560px,43%);
  margin-left:clamp(28px,5.7vw,116px);
  margin-top:clamp(-8px,-1vh,0px);
  text-shadow:0 2px 20px #05151e99;
}
.about-eyebrow{
  display:flex;align-items:center;gap:12px;
  font-size:11px;color:#e4c8a2;letter-spacing:.22em;font-weight:700;
}
.about-eyebrow::before{
  content:"";width:26px;height:1px;background:#d9a96a;box-shadow:0 0 7px #eeac64;
}
.about-hero h1{
  color:#faf4e8;font-size:clamp(74px,7.7vw,150px);font-weight:800;
  letter-spacing:-.066em;line-height:1.08;margin:29px 0 5px;
}
.about-hero h1 span{
  display:block;font-size:clamp(38px,4.5vw,79px);font-weight:700;
  color:#f2c998;letter-spacing:-.075em;line-height:1.35;
}
.about-hero .about-lead{
  font-size:clamp(18px,1.65vw,25px);line-height:1.66;color:#f3e6d6;
  font-weight:500;margin:20px 0 14px;max-width:450px;
}
.about-hero .about-intro{
  font-size:clamp(12px,1vw,15px);line-height:2.1;
  color:#c4cad0;max-width:450px;margin:0;
}
.about-hero-actions{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:29px;
}
.about-primary,.about-secondary{
  appearance:none;cursor:pointer;text-decoration:none;
  min-height:44px;border-radius:100px;
  padding:13px 20px;
  font-size:13px;font-weight:700;letter-spacing:.015em;
  transition:transform .16s,background .16s,border-color .16s;
}
.about-primary{
  border:1px solid #eebd7c;color:#0d1a20;
  background:linear-gradient(110deg,#f2d4a3,#f3a970);
  box-shadow:0 8px 22px #dc8d4345;
}
.about-secondary{
  border:1px solid #e2d1b863;background:rgba(16,33,39,.7);color:#f5dfc2;
}
.about-primary:hover,.about-secondary:hover{transform:translateY(-2px);}
.about-primary:focus-visible,.about-secondary:focus-visible,.about-point:focus-visible{
  outline:2px solid #fee3ac;outline-offset:4px;
}
/* Explore three objects in the miniature study, but use a lightweight
   editorial index instead of the old three-card template. */
.about-explore{
  position:absolute;z-index:5;
  right:clamp(22px,4.5vw,85px);bottom:clamp(55px,9vh,108px);
  width:min(370px,31vw);
}
.about-explore-kicker{
  font-size:10px;letter-spacing:.26em;color:#ead1b6;
  text-shadow:0 2px 10px #101417;
  display:flex;gap:11px;align-items:center;margin-bottom:12px;
}
.about-explore-kicker::after{content:"";flex:1;height:1px;background:#f2d19c80;}
.about-explore-nav{
  display:flex;gap:7px;padding:6px;
  background:rgba(10,25,30,.83);
  border:1px solid #e7d5a55b;
  border-radius:14px;
  backdrop-filter:blur(15px);
}
.about-point{
  flex:1;appearance:none;cursor:pointer;
  background:transparent;border:1px solid transparent;
  border-radius:9px;padding:10px 3px;
  min-width:0;
  color:#bcbdba;
  display:flex;flex-direction:column;gap:5px;align-items:center;
  transition:background .2s,box-shadow .2s,color .2s;
}
.about-point .num{font:500 10px/1.1 ui-monospace,SFMono-Regular,monospace;color:#d6a76c;letter-spacing:.03em;}
.about-point .name{font-size:13px;white-space:nowrap;font-weight:700;}
.about-point[aria-selected="true"]{
  color:#fff4d9;background:rgba(205,155,89,.22);
  border-color:#f5c88870;box-shadow:inset 0 0 24px #ecb16d16;
}
.about-insight{
  min-height:105px;margin-top:12px;
  padding:16px 18px;
  color:#e9e5da;
  background:rgba(7,20,26,.86);
  border:1px solid #d2ad774d;
  border-radius:12px;
  backdrop-filter:blur(12px);
  box-shadow:0 12px 38px #020c1294;
}
.about-insight-title{font-size:17px;font-weight:700;color:#f4d1a2;margin:0 0 7px;}
.about-insight-body{font-size:12px;line-height:1.75;color:#c7c9c8;margin:0;}
.about-side-note{
  position:absolute;left:clamp(30px,5.7vw,118px);bottom:30px;
  z-index:4;color:#ddc4a48c;font-size:10px;letter-spacing:.22em;
}
.about-side-note::before{content:"✦";margin-right:10px;color:#ebb680;}
.about-notebook{
  position:relative;
  background:#101d21;color:#efece6;
  padding:112px clamp(25px,7vw,135px) 100px;
  isolation:isolate;
}
.about-notebook::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
   radial-gradient(ellipse at 90% 14%,#8c6a3430,transparent 45%),
   linear-gradient(90deg,transparent 50%,#bad8c408 50%,transparent 50.1%);
  z-index:-1;
}
.about-notebook-inner{max-width:1200px;margin:0 auto;}
.about-notebook-header{display:grid;grid-template-columns: 1fr 1.5fr;gap:65px;padding-bottom:65px;border-bottom:1px solid #d4bf9f35;}
.about-notebook-kicker{font-size:12px;letter-spacing:.22em;color:#d6aa79;}
.about-notebook-header h2{font-size:clamp(44px,5.6vw,88px);line-height:1.2;letter-spacing:-.06em;margin:8px 0;}
.about-notebook-header p{max-width:620px;margin:0;font-size:16px;color:#c7c9c5;line-height:2;align-self:center;}
.about-note-row{
  display:grid;grid-template-columns:minmax(160px,.55fr) 1fr;
  gap:55px;padding:47px 0;border-bottom:1px solid #d6b78b32;
}
.about-note-id{font:600 12px ui-monospace,SFMono-Regular,monospace;color:#ddae76;letter-spacing:.15em;}
.about-note-row h3{font-size:clamp(25px,3.2vw,39px);margin:8px 0 14px;letter-spacing:-.04em;}
.about-note-row p{max-width:690px;font-size:15px;line-height:2.05;color:#c1c8c5;margin:0;}
.about-note-row .about-link{
  color:#f1cf97;display:inline-block;margin-top:16px;font-size:13px;
  border-bottom:1px solid #f2c58e7e;text-decoration:none;padding-bottom:5px;
}
.about-link:focus-visible{outline:2px solid #fce3b3;outline-offset:4px;}
.about-end{display:flex;align-items:center;justify-content:space-between;gap:25px;flex-wrap:wrap;margin-top:60px;color:#a5b7b2;font-size:11px;letter-spacing:.07em;}
.about-end a{color:#f1d3b4;text-decoration:none;}
/* Dedicated first-person flight, scene asset exactly matches destination. */
.about-flight[hidden]{display:none!important;}
.about-flight{z-index:111!important;}
.about-flight .journey-flight-void{
  background:radial-gradient(circle at var(--jx,50%) var(--jy,50%),#7f5d4c,#1c2730 56%,#0b1921 100%);
}
.about-flight .journey-flight-sphere{filter:drop-shadow(0 0 28px #f2c38db0);}
.about-flight .journey-flight-velocity{
  background:repeating-conic-gradient(from 0deg at 50% 50%,transparent 0deg,transparent 6deg,#f2c17740 6.08deg,transparent 6.3deg,transparent 11deg);
}
.about-flight .journey-flight-hud{color:#ffe0b5;text-shadow:0 0 14px #eeb473;}
.about-flight-interior{
  position:absolute;inset:0;z-index:4;opacity:0;transform:scale(1.12);
  will-change:opacity,transform;
}
.about-flight-interior::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 55% 50%,transparent 0%,#06151b55 78%);}
.about-flight.is-flying .about-flight-interior{
  animation:journey-enter-lab 1570ms cubic-bezier(.2,.72,.28,1) both;
}
.about-flight.is-revealing{transition:opacity 260ms linear;opacity:0;}
body.journey-motion-paused .about-glint{animation:none!important;}
@media(max-width:1100px){
 .about-hero{width:min(550px,52%);}
 .about-explore{width:min(380px,43vw);}
}
@media(max-width:730px){
 .about-scene{height:100svh;min-height:790px;align-items:flex-start;}
 .about-scene,.about-flight-interior{
  background-position:59% center!important;
  background-image:
    linear-gradient(180deg,rgba(5,15,22,.95) 0%,rgba(6,17,24,.90) 18%,rgba(9,20,24,.62) 39%,rgba(6,16,20,.09) 70%,rgba(7,16,22,.6) 100%),
    url('about-study-1280.webp')!important;
 }
 .about-hero{margin:0;position:absolute;top:35px;left:25px;right:25px;width:auto;max-width:none;}
 .about-hero h1{font-size:clamp(60px,14vw,88px);margin:14px 0 5px;}
 .about-hero h1 span{font-size:clamp(33px,8.4vw,50px);}
 .about-hero .about-lead{font-size:17px;max-width:370px;margin:13px 0;}
 .about-hero .about-intro{font-size:12px;max-width:345px;line-height:1.85;}
 .about-hero-actions{margin-top:18px;}
 .about-primary,.about-secondary{min-height:38px;font-size:12px;padding:10px 13px;}
 .about-explore{left:20px;right:20px;bottom:104px;width:auto;max-width:none;}
 .about-explore-nav{gap:5px;padding:4px;}
 .about-point{padding:8px 2px;}
 .about-point .name{font-size:12px;}
 .about-insight{min-height:60px;padding:12px 15px;}
 .about-insight-title{font-size:14px;margin:0 0 5px;}
 .about-insight-body{font-size:11px;}
 .about-side-note{display:none;}
 .about-notebook{padding:68px 24px 85px;}
 .about-notebook-header{display:block;padding-bottom:38px;}
 .about-notebook-header p{font-size:13px;margin-top:20px;}
 .about-note-row{grid-template-columns:1fr;gap:12px;padding:31px 0;}
 .about-note-row h3{font-size:27px;}
 .about-note-row p{font-size:13px;}
 .about-end{padding-bottom:40px;}
}
@media(prefers-reduced-motion:reduce){
 .about-glint{animation:none!important;}
 .about-primary,.about-secondary,.about-point{transition:none!important;}
 .about-flight.is-flying .journey-flight-sphere,
 .about-flight.is-flying .journey-flight-velocity,
 .about-flight.is-flying .about-flight-interior,
 .about-flight.is-flying .journey-flight-hud{animation:none!important;}
}