/* AUDACIOUS HUMILITY | Editorial Immersion (all pages)
   All information is real HTML; JavaScript only enhances reading and navigation.
   Designed for depth and quietness, not wheel hijacking or animations at every sentence. */
:root{--experience-header:74px;--experience-duration:620ms;--experience-inset:clamp(24px,5vw,72px)}
@view-transition{navigation:auto}
::view-transition-old(root){animation:ah-leave .19s ease both}
::view-transition-new(root){animation:ah-arrive .36s ease both}
@keyframes ah-leave{to{opacity:.92}}
@keyframes ah-arrive{from{opacity:.82}to{opacity:1}}
html:has(body.experience-page){scroll-behavior:smooth;scroll-padding-top:var(--experience-header)}
.experience-page{--chapter-progress:0%;isolation:isolate}
.experience-page .header{position:sticky;top:0;z-index:80;background:rgba(247,246,242,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(75,67,56,.15);transition:background .3s,border-color .3s}
.experience-page .header:after{content:'';position:absolute;bottom:-1px;left:0;height:1px;width:var(--chapter-progress);background:#8f7867;pointer-events:none;transition:width .12s linear}
.experience-page .experience-chapter{position:relative;scroll-margin-top:var(--experience-header);scroll-snap-align:start;scroll-snap-stop:normal}
/* Tactility: delicate editorial entry and image movement, not giant animated text. */
.experience-page .experience-chapter[data-seen="true"]:not([data-first]) :is(.section-heading,.intro-pair,.two-col,.hero-sub,.book-grid,.compact-books,.founder-feature blockquote,.statement .wrap,.outro >h2,.prose,.essay-rows,.essay-grid){animation:ah-page-appear var(--experience-duration) cubic-bezier(.18,.8,.22,1) both}
@keyframes ah-page-appear{from{opacity:.73;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.experience-page .person-photo img{transition:transform 1.15s cubic-bezier(.2,.7,.25,1),filter .75s}
.experience-page .experience-chapter[data-seen="true"] .person-photo img{transform:scale(1.012)}
.experience-page a:not(.brand):not(.essay-row):not(.button):not(.nav-cta){transition:color .24s ease,background-color .24s ease,border-color .24s ease}
.experience-page .nav a{position:relative}
.experience-page .nav a[aria-current="page"]{border-color:var(--brass)}
/* Tiny marker at section boundary provides rhythm without gratuitous decoration. */
.experience-page main > .experience-chapter:not(:first-child):not(.dark):not(.stone):before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);height:1px;width:min(calc(100% - 64px),1100px);background:linear-gradient(90deg,transparent,rgba(117,107,92,.14),transparent);pointer-events:none}
/* The navigation has the proportions of a book's margin note. */
.reading-progress{display:none}
.experience-nav{display:none}
@media (min-width:1000px) and (min-height:690px) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 html:has(body.experience-page){scroll-snap-type:y proximity;scroll-padding-top:var(--experience-header)}
 .experience-page main > .experience-chapter{min-height:calc(100svh - var(--experience-header));scroll-snap-align:start;scroll-margin-top:var(--experience-header)}
 .experience-page main > .experience-chapter:is(.inner-hero,.inner-quote,.statement,.outro,.hero-wrap,.founder-feature){display:flex;flex-direction:column;justify-content:center}
 .experience-page main > .experience-chapter:is(.inner-hero,.outro){align-items:flex-start}
 .experience-page main > .experience-chapter:where(.inner-section,.section){display:flex;flex-direction:column;justify-content:center}
 .experience-page main > .experience-chapter:is(.inner-section,.section) >.wrap{width:min(calc(100% - 64px),1100px)}
 .experience-page main >.experience-chapter:where(.inner-section,.section).wrap{width:min(calc(100% - 64px),1100px)}
 .experience-page main > .experience-chapter.hero-wrap{justify-content:space-between}
 .experience-page main > .experience-chapter.founder-feature{display:grid}
 .experience-page main > .experience-chapter.experience-longform{display:block;min-height:calc(100svh - var(--experience-header));padding-top:78px;padding-bottom:110px}
 .experience-page main >.experience-chapter.compact-outro{min-height:55svh}
 .experience-page main > .experience-chapter.inner-hero{padding-top:clamp(48px,8vh,96px);padding-bottom:clamp(52px,9vh,100px)}
 .experience-page main > .experience-chapter.inner-quote{padding-top:clamp(75px,11vh,135px);padding-bottom:clamp(75px,11vh,135px)}
 .experience-page main > .experience-chapter:where(.section,.inner-section){padding-top:clamp(68px,9vh,120px);padding-bottom:clamp(68px,9vh,120px)}
 .experience-page main >.experience-chapter.statement{padding-top:clamp(85px,11vh,140px);padding-bottom:clamp(85px,11vh,140px)}
 .experience-page main >.experience-chapter.outro{padding-top:clamp(74px,9vh,120px);padding-bottom:clamp(74px,9vh,120px)}
 .experience-page main >.experience-chapter.hero-wrap > .hero{flex:1;align-content:center;min-height:0}
 .experience-page main >.experience-chapter.hero-wrap > .topline,.experience-page main >.experience-chapter.hero-wrap > .baseline{flex:none}
 .experience-page main >.experience-chapter .inner-section >.wrap{width:min(calc(100% - 64px),1100px)}
 .experience-nav{position:fixed;right:clamp(18px,2.2vw,38px);bottom:clamp(23px,3.5vh,43px);width:137px;z-index:65;display:flex;flex-direction:column;gap:11px;padding:14px 15px 11px;background:rgba(248,247,243,.94);border:1px solid rgba(95,87,76,.21);border-radius:2px;box-shadow:0 12px 38px rgba(35,34,29,.06);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:opacity .25s,transform .25s}
 .experience-nav[data-near-footer=true]{opacity:0;transform:translateY(12px);pointer-events:none}
 .experience-detail{display:grid;grid-template-columns:1fr auto;gap:4px;align-items:end}
 .experience-overline{grid-column:1/-1;font:9px/1.1 var(--font);letter-spacing:.16em;color:#77746d}
 .experience-title{font:12px/1.25 var(--serif);max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#2e2d29}
 .experience-count{font:9px/1.2 var(--font);font-variant-numeric:tabular-nums;color:#6e6860;white-space:nowrap}
 .experience-track{display:flex;gap:4px;width:100%}
 .experience-stop{height:3px;flex:1;padding:0;border:0;background:#d9d5cf;cursor:pointer;position:relative;border-radius:0;transition:background .2s}
 .experience-stop:after{content:'';position:absolute;inset:-12px -3px}
 .experience-stop:hover{background:#bda995}
 .experience-stop.is-active{background:#745f4f}
 .experience-actions{display:flex;align-items:center;justify-content:flex-end;gap:2px;padding-top:2px}
 .experience-actions button{border:0;background:transparent;width:33px;height:28px;display:grid;place-items:center;cursor:pointer;font:20px/1 var(--serif);color:#4e4b45;transition:transform .18s,background .18s}
 .experience-actions button:hover{background:#eae5df;transform:translateY(-2px)}
 .experience-actions button:disabled{opacity:.24;cursor:default;transform:none;background:transparent}
 .experience-actions button:focus-visible,.experience-stop:focus-visible{outline:2px solid #867665;outline-offset:3px}
 /* If a chapter is genuinely taller than the screen, keep natural scrolling until its end. */
 html:has(body.experience-page) {overscroll-behavior-y:auto}
}
/* Mobile/tablet: natural reading, graceful appearances and a discreet page progress thread. */
@media (max-width:999px), (max-height:689px), (pointer:coarse){
 html:has(body.experience-page){scroll-snap-type:none;scroll-padding-top:65px}
 .experience-page .header{position:sticky;top:0}
 .experience-page .experience-chapter{min-height:0;scroll-snap-align:none}
 .experience-nav{display:none}
}
@media (prefers-reduced-motion:reduce){
 html:has(body.experience-page){scroll-behavior:auto;scroll-snap-type:none}
 .experience-page .experience-chapter,.experience-page .experience-chapter *{animation:none!important;transition-duration:.01ms!important}
 .experience-page .experience-nav{display:none}
 ::view-transition-old(root),::view-transition-new(root){animation:none}
}


/* IMMERSIVE DARK EDITION | final visual pass */
:root{
  --bg:#0d1014;
  --bg-2:#10141a;
  --panel:#141920;
  --panel-2:#171d25;
  --ink:#f4efe6;
  --muted:#b7b0a4;
  --line:rgba(214,202,184,.12);
  --stone:#12171e;
  --brass:#b49168;
  --brass-2:#d0b089;
  --shadow:0 18px 60px rgba(0,0,0,.34);
}
html,body{background:var(--bg)!important;color:var(--ink)!important}
body.experience-page{
  position:relative;
  background:
    radial-gradient(1200px 700px at 8% -10%, rgba(180,145,104,.17), transparent 62%),
    radial-gradient(900px 620px at 92% 8%, rgba(61,84,94,.18), transparent 60%),
    linear-gradient(180deg, #0d1014 0%, #0e1217 38%, #10141a 100%)!important;
  color:var(--ink)!important;
}
body.experience-page::before,
body.experience-page::after{
  content:'';position:fixed;inset:-8%;pointer-events:none;z-index:-1;opacity:.75;
}
body.experience-page::before{
  background:
    radial-gradient(500px 340px at 15% 14%, rgba(184,145,104,.12), transparent 70%),
    radial-gradient(580px 380px at 85% 18%, rgba(65,106,120,.10), transparent 72%),
    radial-gradient(760px 520px at 50% 80%, rgba(188,138,90,.05), transparent 75%);
  filter:blur(18px);
}
body.experience-page::after{
  inset:0;
  opacity:.08;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:100% 100px,100px 100%;
  mask-image:linear-gradient(to bottom, transparent, black 14%, black 86%, transparent);
}
@media (prefers-reduced-motion:no-preference){
  body.experience-page::before{animation:ahGlow 18s ease-in-out infinite alternate}
  .experience-page .experience-nav{animation:ahFloat 7s ease-in-out infinite}
}
@keyframes ahGlow{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(0,-1.5%,0) scale(1.03)}}
@keyframes ahFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
body.experience-page .header,
body.experience-page .footer,
body.experience-page .founder-feature,
body.experience-page .stone,
body.experience-page .dark{
  background:transparent!important;
}
.experience-page .header{
  background:rgba(10,12,16,.68)!important;
  border-bottom:1px solid rgba(216,202,184,.10)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset;
}
.experience-page .header:after{background:linear-gradient(90deg, var(--brass), var(--brass-2))!important;height:2px}
.experience-page .brand strong,
.experience-page .nav a,
.experience-page .site-h1,
.experience-page .display,
.experience-page h1,
.experience-page h2,
.experience-page h3,
.experience-page h4,
.experience-page strong,
.experience-page b{color:var(--ink)}
.experience-page p,
.experience-page li,
.experience-page .hero-byline,
.experience-page .hero-lead,
.experience-page .intro-pair>p,
.experience-page .item-row p,
.experience-page .book-detail p,
.experience-page .essay-card p,
.experience-page .prose,
.experience-page .inner-copy,
.experience-page .name-variant,
.experience-page .hero-sub p,
.experience-page .foot-bottom,
.experience-page .founder-sign small,
.experience-page figcaption,
.experience-page .symbol-caption,
.experience-page .book-disclaimer{color:var(--muted)!important}
.experience-page .eyebrow,
.experience-page .number,
.experience-page .duality small,
.experience-page .rows small,
.experience-page .book-detail small,
.experience-page .essay-card>small,
.experience-page .experience-overline,
.experience-page .book-image-baseline,
.experience-page .foot-links small{color:var(--brass-2)!important}
.experience-page .section-label,
.experience-page .topline,
.experience-page .baseline,
.experience-page .rows,
.experience-page .item-row,
.experience-page .duality,
.experience-page .statement-end,
.experience-page .foot-bottom,
.experience-page .section-label,
.experience-page .book-image-baseline,
.experience-page .author-elsewhere,
.experience-page .essay-card,
.experience-page .compact-books,
.experience-page .small-book,
.experience-page .article-block,
.experience-page .rule,
.experience-page .book-grid,
.experience-page .inner-hero,
.experience-page .inner-section{border-color:var(--line)!important}
.experience-page main > .experience-chapter{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.008));
  border-top:1px solid rgba(255,255,255,.02);
}
.experience-page main > .experience-chapter::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.02), transparent 22%, transparent 78%, rgba(255,255,255,.018));
  opacity:.5;
}
.experience-page main > .experience-chapter > *{position:relative;z-index:1}
.experience-page .experience-chapter:is(.statement,.founder-feature,.stone){
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
}
.experience-page .section-label,
.experience-page .topline,
.experience-page .baseline{color:rgba(239,231,220,.66)!important}
.experience-page .live-dot{background:var(--brass-2)!important; box-shadow:0 0 0 6px rgba(180,145,104,.10),0 0 18px rgba(180,145,104,.35)}
.experience-page .display em,
.experience-page .hero h1 em,
.experience-page .statement h2 em,
.experience-page .dark .display em,
.experience-page .foot-statement em{color:var(--brass-2)!important}
.experience-page .button,
.experience-page .nav-cta{
  color:#120f0c!important;
  background:linear-gradient(180deg, #d8be99, #b28b62)!important;
  border:1px solid rgba(255,255,255,.1)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.22);
}
.experience-page .button:hover,
.experience-page .nav-cta:hover{filter:brightness(1.05);transform:translateY(-1px)}
.experience-page .text-link,
.experience-page .foot-links a,
.experience-page .codex-brief a,
.experience-page .author-elsewhere a,
.experience-page .more{color:var(--ink)!important;border-color:rgba(244,239,230,.35)!important}
.experience-page .text-link:hover,
.experience-page .foot-links a:hover,
.experience-page .codex-brief a:hover,
.experience-page .author-elsewhere a:hover,
.experience-page .more:hover{color:var(--brass-2)!important;border-color:var(--brass-2)!important}
.experience-page .person-photo,
.experience-page .book-stage,
.experience-page .book-image-stage,
.experience-page .book-cover-link,
.experience-page .essay-art,
.experience-page .about-photo,
.experience-page .hero-photo,
.experience-page .founder-seal div,
.experience-page .author-inline,
.experience-page .work-photo,
.experience-page .about-feature,
.experience-page .inner-quote{
  background:rgba(255,255,255,.03)!important;
  border:1px solid rgba(218,206,189,.12)!important;
  box-shadow:var(--shadow);
}
.experience-page .person-photo img,
.experience-page .about-photo img,
.experience-page .work-photo img{filter:saturate(.96) contrast(1.03)}
.experience-page .essay-art span{color:rgba(255,255,255,.33)!important}
.experience-page .item-row:hover,
.experience-page .book-cover-link:hover,
.experience-page .book-stage:hover,
.experience-page .essay-card:hover .essay-art{background:rgba(255,255,255,.05)!important}
.experience-page .quote-source a,
.experience-page .founder-feature a{color:var(--brass-2)!important}
.experience-page .footer{padding-top:56px;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.0))!important;border-top:1px solid rgba(255,255,255,.06)}
.experience-page .footer-wordmark{filter:brightness(1.08)}
.experience-page .experience-nav{
  background:rgba(13,16,20,.76)!important;
  border:1px solid rgba(216,202,184,.14)!important;
  box-shadow:0 22px 60px rgba(0,0,0,.35)!important;
}
.experience-page .experience-title{color:var(--ink)!important}
.experience-page .experience-count{color:var(--muted)!important}
.experience-page .experience-stop{background:rgba(255,255,255,.16)!important}
.experience-page .experience-stop:hover{background:rgba(212,181,144,.55)!important}
.experience-page .experience-stop.is-active{background:linear-gradient(90deg,var(--brass-2),var(--brass))!important}
.experience-page .experience-actions button{color:var(--ink)!important}
.experience-page .experience-actions button:hover{background:rgba(255,255,255,.07)!important}
/* Mobile and touch also get an immersive control layer. */
@media (max-width:999px), (max-height:689px), (pointer:coarse){
  .experience-page .reading-progress{display:block;position:fixed;top:0;left:0;z-index:90;height:2px;width:var(--chapter-progress);background:linear-gradient(90deg, var(--brass-2), var(--brass));box-shadow:0 0 12px rgba(180,145,104,.3)}
  .experience-page .experience-nav{
    display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;
    position:fixed;left:12px;right:12px;bottom:12px;z-index:80;
    padding:12px 14px;background:rgba(9,11,15,.82)!important;border:1px solid rgba(216,202,184,.14)!important;border-radius:14px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    box-shadow:0 15px 35px rgba(0,0,0,.35);
  }
  .experience-page .experience-detail{display:flex;flex-direction:column;gap:1px;min-width:0}
  .experience-page .experience-overline{font-size:8px;letter-spacing:.18em}
  .experience-page .experience-title{font:15px/1.2 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:none}
  .experience-page .experience-count{font-size:10px}
  .experience-page .experience-track{display:none}
  .experience-page .experience-actions{padding:0;gap:6px}
  .experience-page .experience-actions button{width:36px;height:36px;border-radius:999px;background:rgba(255,255,255,.05)!important}
  .experience-page .experience-nav[data-near-footer=true]{opacity:.28;transform:translateY(22px);pointer-events:none}
  .experience-page .footer{padding-bottom:92px}
}
@media (min-width:1000px) and (min-height:690px) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .experience-page main > .experience-chapter{backdrop-filter:blur(1.5px)}
 .experience-page .experience-nav{right:18px;bottom:22px;width:164px;border-radius:14px;padding:16px 16px 12px}
}
