/* Experience is the opening scene. Existing portfolio typography and colours carry through. */
.experience-timeline{--cover:clamp(245px,25vw,320px);--step:clamp(155px,22vw,255px);position:relative;overflow:hidden;background:#10120f;padding-bottom:32px;isolation:isolate;border-bottom:1px solid var(--line)}
.timeline-identity{display:flex;justify-content:space-between;align-items:center;gap:30px;padding-top:26px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.timeline-person{display:flex;align-items:center;gap:18px}.timeline-person>img{width:52px;height:64px;object-fit:cover;object-position:50% 30%;filter:saturate(.7)}
.timeline-person .eyebrow{font-size:9px;color:var(--muted);margin-bottom:7px}.timeline-person h1{font:600 clamp(32px,3.7vw,52px)/.9 var(--display);letter-spacing:-.015em;margin:0}.timeline-person h1>span{color:var(--lime)}
.timeline-intro{font-size:12px;line-height:1.65;text-align:right}.timeline-intro p{margin:0;color:var(--cream)}.timeline-intro>span{color:var(--muted);font-size:11px}
.timeline-heading{display:flex;justify-content:space-between;align-items:end;padding-top:24px;padding-bottom:8px}.timeline-heading h2{font:500 clamp(29px,3.5vw,48px)/1 var(--display);margin:0}.timeline-heading h2>span{color:var(--muted)}.timeline-heading>p{color:var(--muted);font-size:11px;line-height:1.5;margin:0;text-align:right}
.flow-stage{position:relative;min-height:calc(var(--cover) + 38px);perspective:1200px;touch-action:pan-y pinch-zoom;outline-offset:-6px!important;isolation:isolate}
.flow-backdrop{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;pointer-events:none;z-index:-1;opacity:.035}.flow-backdrop>span{font:600 clamp(130px,26vw,420px)/1 var(--display);letter-spacing:-.03em;white-space:nowrap}
.flow-covers{display:flex;gap:24px;list-style:none;margin:0;padding:18px 24px;overflow-x:auto;scroll-snap-type:x mandatory}
.flow-slot{flex:0 0 var(--cover);width:var(--cover);height:var(--cover);scroll-snap-align:center}.flow-cover{display:block;position:relative;width:100%;height:100%;text-align:left;padding:0;background:#24281e;border:1px solid #f4f3e933;box-shadow:0 25px 35px #0007;overflow:hidden;color:var(--cream);cursor:pointer;user-select:none;-webkit-user-select:none}
.flow-cover>img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}.flow-cover-shade{position:absolute;inset:0;background:linear-gradient(#0005,transparent 30%,transparent 60%,#000d);pointer-events:none}
.flow-cover-top{position:absolute;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;gap:12px;font-size:9px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;text-shadow:0 1px 6px #000}
.flow-cover-top>span:first-child{background:#10120fd9;padding:5px 7px;color:var(--lime)}.flow-cover-top>span+span{padding-block:5px}
.flow-cover-type{position:absolute;bottom:18px;left:20px;right:20px;display:block;z-index:1}.flow-cover-type>span{display:block;font:600 clamp(27px,3vw,40px)/.98 var(--display);letter-spacing:-.015em}.flow-cover-type>small{display:block;font-size:11px;line-height:1.4;margin-top:7px;color:#eeefe7}
.flow-jq>img{object-fit:contain;background:#0c141e}.flow-jq .flow-cover-type{display:none}.flow-jq .flow-cover-shade{background:linear-gradient(#0006,transparent 23%)}
.flow-crusade{background:#c8c4ae;color:#161c17}.flow-crusade .flow-cover-shade,.flow-my-jesus .flow-cover-shade,.flow-music-city-story .flow-cover-shade{background:none}
.flow-crusade .flow-cover-type{inset:42% 14px auto;text-align:center}.flow-crusade .flow-cover-type>span{font:500 clamp(35px,4vw,53px)/1 var(--display);letter-spacing:.02em}.flow-crusade .flow-cover-type>small{color:#28312b;margin-top:20px}.flow-crusade:after{content:'';position:absolute;inset:14px;border:1px solid #161c172b;pointer-events:none}
.flow-my-jesus{background:#22372d}.flow-my-jesus .flow-cover-type{inset:auto 26px 30px}.flow-my-jesus .flow-cover-type>span{font-size:clamp(52px,7vw,88px);max-width:200px;line-height:.85;text-transform:uppercase}.flow-my-jesus:before{content:'WORKING TITLE';position:absolute;left:26px;top:31%;font-size:9px;letter-spacing:.25em;color:#bed0b9}
.flow-music-city-story{background:#d8d3c5;color:#172118}.flow-music-city-story .flow-cover-type{inset:auto 25px 33px}.flow-music-city-story .flow-cover-type>span{font-size:clamp(45px,6vw,76px);line-height:.9;max-width:240px}.flow-music-city-story .flow-cover-type>small{color:#2d392e}
.experience-timeline[data-enhanced] .flow-covers{display:block;overflow:visible;padding:0;position:relative;height:calc(var(--cover) + 38px);transform-style:preserve-3d}
.experience-timeline[data-enhanced] .flow-slot{position:absolute;left:50%;top:18px;transform-style:preserve-3d;transform:translateX(calc(-50% + var(--offset) * var(--step))) translateZ(calc(var(--distance) * -100px)) rotateY(calc(var(--side) * -46deg));transition:transform 480ms cubic-bezier(.22,1,.36,1),opacity 300ms;opacity:1}
.experience-timeline[data-enhanced] .flow-slot[data-far="true"]{opacity:0;visibility:hidden;pointer-events:none}
.experience-timeline[data-enhanced] .flow-cover[aria-current="true"]{filter:none;border-color:#f4f3e977;box-shadow:0 24px 50px #000a}
.flow-caption-wrap{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;gap:25px;align-items:center;max-width:760px;margin:0 auto;text-align:center;position:relative;z-index:4;padding-top:9px}
.flow-arrow{background:transparent;border:1px solid #f4f3e94d;border-radius:50%;width:44px;height:44px;color:var(--cream);font-size:23px;transition:background .2s,color .2s}.flow-arrow:disabled{opacity:.22}.flow-arrow:not(:disabled):hover{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.flow-caption{min-height:149px}.flow-period{display:flex;justify-content:center;align-items:center;gap:10px;margin:0 0 7px;text-transform:uppercase;letter-spacing:.12em;font-size:9px;color:var(--muted)}.flow-period>span+span{color:var(--lime);border-left:1px solid #ffffff30;padding-left:10px}
.flow-caption h3{font:500 clamp(30px,4vw,45px)/1 var(--display);margin:0}.flow-role{font-size:15px;line-height:1.4;margin:7px 0 3px;color:var(--cream)}.flow-note{font-size:11px;line-height:1.5;margin:0;color:var(--muted)}
.flow-detail{background:transparent;color:var(--cream);border-bottom:1px solid #f4f3e947;padding:5px 0;margin-top:9px;font-size:11px}.flow-detail:hover{color:var(--lime)}
.flow-journey{max-width:1080px;margin:auto;position:relative;padding-top:18px}.flow-instructions{display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:10px;color:var(--muted);margin-bottom:12px}.flow-instructions p{margin:0}.flow-instructions button{padding:0;background:transparent;color:var(--lime);font-size:11px}
.flow-eras{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #f4f3e92b}.flow-era{position:relative;text-align:left;padding:12px 6px 9px 0;background:transparent;color:var(--muted)}.flow-era:before{content:'';position:absolute;left:0;top:-2px;right:0;height:3px;background:transparent}.flow-era>span{font:500 22px/1 var(--display)}.flow-era small{display:block;font-size:9px;margin-top:4px;line-height:1.3}.flow-era[aria-current]{color:var(--cream)}.flow-era[aria-current]:before{background:var(--lime)}
.flow-points{display:flex;gap:2px;align-items:center;padding-top:2px;padding-right:55px}.flow-points>button{padding:8px 3px;min-height:28px;flex:1;background:transparent;border:0}.flow-points>button>span{display:block;height:2px;background:#f4f3e933;transition:background .2s,height .2s}.flow-points>button[aria-current]>span{height:4px;background:var(--lime)}.flow-position{position:absolute;bottom:5px;right:clamp(20px,4.5vw,80px);font-size:10px;color:var(--muted);margin:0}
.credit-directory{padding-block:26px 40px;border-bottom:1px solid var(--line)}.credit-directory>summary{display:flex;justify-content:space-between;align-items:center;gap:15px;font:500 25px/1.2 var(--display);list-style:none;cursor:pointer}.credit-directory>summary::-webkit-details-marker{display:none}.credit-directory>summary small{font:400 10px/1.5 var(--body);color:var(--muted)}.credit-directory[open]>summary{margin-bottom:30px}.credit-directory[open]>summary>span:after{content:' −'}.credit-directory:not([open])>summary>span:after{content:' +'}.credit-directory .overview-heading{display:none}.credit-directory .experience-overview{padding:0}.credit-directory .overview-controls{margin-top:0}
@media(max-width:760px){
 .experience-timeline{--cover:min(65vw,280px);--step:54vw;padding-bottom:22px}.timeline-identity{padding-top:18px;padding-bottom:16px;gap:14px;align-items:start}.timeline-person{gap:12px}.timeline-person>img{width:35px;height:46px}.timeline-person .eyebrow{font-size:7px;letter-spacing:.12em;margin-bottom:5px}.timeline-person h1{font-size:31px;white-space:nowrap}.timeline-intro{display:none}.timeline-heading{padding-top:18px;padding-bottom:4px;align-items:center}.timeline-heading h2{font-size:27px}.timeline-heading>p{font-size:9px;max-width:140px}.flow-stage{min-height:calc(var(--cover) + 32px)}.experience-timeline[data-enhanced] .flow-covers{height:calc(var(--cover) + 32px)}.experience-timeline[data-enhanced] .flow-slot{top:14px}.flow-cover-type>span{font-size:30px}.flow-cover-top{font-size:8px;top:11px;left:11px;right:11px}.flow-cover-type>small{font-size:10px}.flow-crusade .flow-cover-type>span{font-size:39px}.flow-my-jesus .flow-cover-type>span{font-size:63px}.flow-music-city-story .flow-cover-type>span{font-size:51px}.flow-caption-wrap{grid-template-columns:36px minmax(0,1fr) 36px;gap:8px;padding-top:6px}.flow-arrow{width:35px;height:35px;font-size:20px}.flow-caption{min-height:147px}.flow-caption h3{font-size:34px}.flow-role{font-size:14px}.flow-note{font-size:10px}.flow-period{font-size:8px;gap:7px}.flow-journey{padding-top:8px}.flow-instructions{font-size:9px;align-items:start;min-height:16px}.flow-instructions button{font-size:10px;white-space:nowrap}.flow-eras{grid-template-columns:.8fr .8fr 1fr 1.15fr}.flow-era{padding-top:11px}.flow-era>span{font-size:18px}.flow-era small{font-size:8px}.flow-points{gap:1px}.flow-points>button{padding-inline:1px}.flow-position{right:20px;font-size:9px}.credit-directory>summary{font-size:23px}.credit-directory>summary small{max-width:125px;text-align:right}
}
@media(max-width:359px){.timeline-heading>p{display:none}.flow-instructions p{max-width:175px}.flow-caption h3{font-size:29px}.flow-role{font-size:12px}.flow-note{font-size:9px}}
@media(prefers-reduced-motion:reduce){.experience-timeline .flow-slot,.experience-timeline .flow-points span,.experience-timeline .flow-arrow{transition:none!important}}
.paused .experience-timeline .flow-slot,.reduced .experience-timeline .flow-slot{transition:none!important}
@media print{.experience-timeline .flow-stage,.flow-caption-wrap,.flow-journey,.timeline-heading{display:none!important}.timeline-identity{color:#111}.credit-directory>summary{display:none}.credit-directory:not([open])>*:not(summary){display:block!important}}
/* Period jumps change scenes immediately rather than flying through hidden covers. */
.experience-timeline[data-jump="true"] .flow-slot{transition:none!important}
@media(max-width:760px){
 .navigation-ready .topbar{margin-bottom:0;background:#10120f}
 .flow-caption-wrap{grid-template-columns:44px minmax(0,1fr) 44px;gap:6px}
 .flow-arrow{width:44px;height:44px}
}

/* Let tilted covers receive pointer input through the stage’s front plane. */
.experience-timeline[data-enhanced] .flow-covers{pointer-events:none}
.experience-timeline[data-enhanced] .flow-cover{pointer-events:auto}

/* Official project artwork supplied by the three public project websites. */
.flow-cover[data-official-art] .flow-cover-type{display:none}
.flow-cover[data-official-art]>.flow-cover-logo{position:absolute;object-fit:contain;z-index:2;pointer-events:none}
.flow-crusade[data-official-art]{background:#fff;color:#111}
.flow-crusade[data-official-art]>img{object-fit:contain}
.flow-crusade[data-official-art]:after{display:none}
.flow-crusade[data-official-art] .flow-cover-top>span+span{color:#111;text-shadow:none}
.flow-my-jesus[data-official-art]{background:#f5f1e8;color:#171512}
.flow-my-jesus[data-official-art]>img:not(.flow-cover-logo){position:absolute;inset:auto 0 0;width:100%;height:38%;object-fit:cover;object-position:50% 50%}
.flow-my-jesus[data-official-art]>.flow-cover-logo{left:9%;top:15%;width:82%;height:40%}
.flow-my-jesus[data-official-art]:before{content:'WORKING TITLE';left:0;right:0;top:56%;text-align:center;font-size:8px;letter-spacing:.17em;color:#686052}
.flow-my-jesus[data-official-art] .flow-cover-top>span+span{color:#171512;text-shadow:none}
.flow-music-city-story[data-official-art]{background:#292319;color:#fff}
.flow-music-city-story[data-official-art] .flow-cover-shade{background:linear-gradient(#0004,#0007 35%,#0009)}
.flow-music-city-story[data-official-art]>.flow-cover-logo{left:6%;top:28%;width:88%;height:49%}
.official-credit-thumb{object-fit:contain!important;background:#f5f1e8;filter:none!important}
.experience-item[data-credit="music-city-story"] .official-credit-thumb{background:#28241c}
.credit-dialog[data-official-art="crusade"] .dialog-art{background:#fff}
.credit-dialog[data-official-art="crusade"] .dialog-art::after{display:none}
.credit-dialog[data-official-art="crusade"] #dialogImage{object-fit:contain}
.credit-dialog[data-official-art="my-jesus"] .dialog-art{background:#f5f1e8}
.credit-dialog[data-official-art="my-jesus"] .dialog-art::after{display:none}
.credit-dialog[data-official-art="my-jesus"] #dialogImage{inset:auto 0 0;height:39%;object-position:center}
.credit-dialog[data-official-art="my-jesus"] #dialogLogo{top:12%;bottom:auto;left:9%;width:82%;height:43%;filter:none}
.credit-dialog[data-official-art="music-city-story"] .dialog-art::after{background:linear-gradient(#0005,#0009)}
.credit-dialog[data-official-art="music-city-story"] #dialogLogo{top:28%;bottom:auto;left:7%;width:86%;height:43%;filter:none}
.official-film-art{position:relative;display:block;padding:0;background:#f5f1e8;color:#171512}
.official-film-art>.official-film-photo{position:absolute;inset:auto 0 0;width:100%;height:38%;object-fit:cover}
.official-film-art>.official-film-logo{position:absolute;left:8%;top:17%;width:84%;height:36%;object-fit:contain}
.official-film-art>.screen-project-status{position:absolute;top:20px;left:20px;color:#171512;font-size:12px}
.official-film-art>.screen-project-working-title{position:absolute;top:55%;left:0;right:0;text-align:center;font-size:12px;color:#686052}
.official-film-art>.screen-project-location{position:absolute;left:18px;right:18px;bottom:16px;padding:8px;background:#10120fd9;color:#fff;font-size:12px;z-index:2}

/* Official film artwork for the completed A Music City Story credit. */
.music-city-film-art{background:#292319}
.music-city-film-art::after{background:linear-gradient(#0004,#0008 45%,#000a)}
.music-city-film-art>.poster-title{position:absolute;left:6%;top:24%;width:88%;height:48%;object-fit:contain;z-index:1;filter:none}

/* A lit collection: deep side planes, a reflective floor and moving cover light. */
.experience-timeline{--scene-light:#648cac;--scene-warm:#d5b886;--cover:clamp(260px,26vw,340px);--step:clamp(170px,21vw,270px);background:#0a0c0d}
.flow-stage{perspective:1050px;min-height:calc(var(--cover) + 116px);padding-top:16px}
.flow-stage::before,.flow-stage::after{content:'';position:absolute;pointer-events:none;z-index:-1;transition:background 700ms ease,opacity 700ms ease}
.flow-stage::before{inset:-90px -10% -65px;background:radial-gradient(ellipse at 37% 34%,color-mix(in srgb,var(--scene-light) 30%,transparent),transparent 49%),radial-gradient(ellipse at 77% 67%,color-mix(in srgb,var(--scene-warm) 19%,transparent),transparent 45%)}
.flow-stage::after{left:-10%;right:-10%;top:calc(var(--cover) + 30px);height:100px;background:radial-gradient(ellipse at 50% 0,color-mix(in srgb,var(--scene-light) 27%,transparent),transparent 65%);border-top:1px solid #ffffff0a;transform:rotateX(34deg);transform-origin:top}
.flow-backdrop{opacity:.065;inset:-40px 0 0;align-items:flex-start;padding-top:15px;mask-image:linear-gradient(#000,transparent 86%)}
.flow-backdrop>span{font-size:clamp(180px,34vw,510px);letter-spacing:-.045em}
.experience-timeline[data-enhanced] .flow-covers{height:calc(var(--cover) + 100px)}
.experience-timeline[data-enhanced] .flow-slot{top:28px;transform:translateX(calc(-50% + var(--offset)*var(--step))) translateY(calc(var(--distance)*13px)) translateZ(calc(40px - var(--distance)*145px)) rotateY(var(--angle,0deg));transition:transform 650ms cubic-bezier(.19,1,.22,1),opacity 450ms;will-change:transform}
.experience-timeline[data-enhanced] .flow-slot .flow-cover{filter:brightness(var(--exposure,1));border-color:#ffffff30;border-radius:3px;box-shadow:inset 1px 1px #ffffff70,3px 0 0 #242c32,6px 2px 0 #080a0c,0 27px 45px #000b;transition:filter 550ms,border-color 400ms,transform 280ms ease;transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));-webkit-box-reflect:below 12px linear-gradient(transparent 76%,#00000026)}
.experience-timeline[data-enhanced] .flow-cover[aria-current="true"]{border-color:#ffffff8a;box-shadow:inset 1px 1px #fff9,3px 0 0 #46505a,6px 2px 0 #080a0c,0 30px 65px #000c,0 0 48px color-mix(in srgb,var(--scene-light) 15%,transparent)}
.flow-cover>.flow-gloss{content:'';position:absolute;inset:0;pointer-events:none;z-index:5;background:radial-gradient(ellipse at var(--light-x,26%) var(--light-y,12%),#ffffff38,transparent 58%),linear-gradient(115deg,transparent 22%,#ffffff1c 43%,transparent 60%);opacity:var(--shine,.18);mix-blend-mode:screen}
.flow-caption-wrap{padding-top:0}.flow-caption h3{text-shadow:0 4px 24px #0008}.flow-period{letter-spacing:.2em}.flow-detail{padding:8px 0}
.experience-timeline[data-dragging="true"] .flow-slot,.experience-timeline[data-dragging="true"] .flow-slot .flow-cover{transition:none!important}
.experience-timeline[data-dragging="true"] .flow-stage{cursor:grabbing}.flow-stage{cursor:grab}.flow-cover:active{cursor:grabbing}
.flow-arrow:not(:disabled):hover{box-shadow:0 0 28px #caff5e30}
@media(max-width:760px){
 .experience-timeline{--cover:min(64vw,280px);--step:49vw}
 .flow-stage{padding-top:10px;min-height:calc(var(--cover) + 99px);perspective:800px}
 .experience-timeline[data-enhanced] .flow-covers{height:calc(var(--cover) + 89px)}
 .experience-timeline[data-enhanced] .flow-slot{top:22px;transform:translateX(calc(-50% + var(--offset)*var(--step))) translateY(calc(var(--distance)*10px)) translateZ(calc(24px - var(--distance)*115px)) rotateY(var(--angle,0deg))}
 .flow-backdrop{inset:-5px -50% 0;padding-top:12px}.flow-backdrop>span{font-size:210px}
 .flow-stage::before{inset:-50px -40% -40px}.flow-stage::after{top:calc(var(--cover) + 27px);height:70px}
 .flow-caption{min-height:151px}.flow-caption h3{font-size:36px}.flow-caption-wrap{padding-top:0}
}
@media(prefers-reduced-motion:reduce){
 .experience-timeline .flow-slot,.experience-timeline .flow-cover,.flow-stage::before,.flow-stage::after{transition:none!important}
 .experience-timeline .flow-cover{transform:none!important}
}
.paused .experience-timeline .flow-cover,.reduced .experience-timeline .flow-cover{transform:none!important;transition:none!important}

@property --scene-light{syntax:"<color>";inherits:true;initial-value:#648cac}
@property --scene-warm{syntax:"<color>";inherits:true;initial-value:#d5b886}
.experience-timeline{transition:--scene-light 700ms ease,--scene-warm 700ms ease}
@media(prefers-reduced-motion:reduce){.experience-timeline{transition:none}}
.paused .experience-timeline,.reduced .experience-timeline{transition:none}

/* A close portrait with soft edges, integrated into the name rather than boxed as an avatar. */
.timeline-person{gap:16px}
.timeline-portrait{display:block;flex:0 0 72px;width:72px;height:76px;overflow:hidden;mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 84%,transparent 100%)}
.timeline-portrait>img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 41%;transform:scale(1.85);transform-origin:50% 44%;filter:saturate(.55);opacity:.95}
@media(max-width:760px){.timeline-person{gap:12px}.timeline-portrait{flex-basis:54px;width:54px;height:58px}.timeline-identity{padding-top:14px;padding-bottom:14px}}

/* Native touch momentum, with no gesture capture or one-cover wheel gate. */
.experience-timeline[data-native] .flow-stage{touch-action:pan-x pan-y pinch-zoom}
.experience-timeline[data-native] .flow-covers{display:flex;gap:22px;overflow-x:auto;overflow-y:hidden;pointer-events:auto;padding:28px calc((100% - var(--cover))/2) 74px;height:calc(var(--cover) + 115px);scroll-snap-type:x proximity;scrollbar-width:none;touch-action:pan-x pan-y pinch-zoom;-webkit-overflow-scrolling:touch;perspective:none;box-sizing:border-box}
.experience-timeline[data-native] .flow-covers::-webkit-scrollbar{display:none}
.experience-timeline[data-native] .flow-slot{position:relative;left:auto;top:auto;flex:0 0 var(--cover);height:var(--cover);scroll-snap-align:center;transform:perspective(1000px) rotateY(var(--angle,0deg)) scale(clamp(.76,calc(1 - var(--distance)*.09),1));transition:none!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important}
.experience-timeline[data-native] .flow-slot .flow-cover{transition:none;touch-action:pan-x pan-y pinch-zoom}