/* Shared visual language for the two standalone paths. */

*{box-sizing:border-box}
html{background:#303537;color-scheme:dark}
body{margin:0;color:#ececeb;font-family:"Cabin",sans-serif;font-size:17px;line-height:1.65}
a{color:inherit}
button,summary,a{-webkit-tap-highlight-color:transparent}
a:focus-visible,summary:focus-visible{outline:2px solid #ff9800;outline-offset:6px}
.branch-page{position:relative;isolation:isolate;min-height:100vh;background:#303537}
.branch-page::before{content:"";position:absolute;inset:0 0 auto 38%;height:800px;z-index:-1;pointer-events:none;background-size:cover;background-position:center;filter:grayscale(1) brightness(.48);mask-image:linear-gradient(to bottom,#000 45%,transparent 100%)}
.branch-page::after{content:"";position:absolute;inset:0 0 auto 0;height:800px;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#303537 26%,transparent 100%)}
.branch-scientist::before{background-image:url('../img/headshot.jpg');background-position:52% 30%}
.branch-mandar::before{background-image:url('../img/openmic.jpg');background-position:60% center}
.branch-shell{width:min(100%,1200px);margin:auto;padding:40px 48px 32px}
.path-return{display:inline-flex;align-items:center;gap:10px;padding:8px 0;font-size:16px;text-decoration:none}
.path-return svg{width:22px;height:22px}
a{transition:color .18s ease}
a:hover{color:#ff9800}
.branch-heading{padding:72px 0 86px;max-width:770px}
.eyebrow,.date,.aside,.graph-hint,.track-end,.note-number{font-family:"Ubuntu Mono",monospace}
.eyebrow{font-size:15px;color:#c5c8c8;margin:0 0 20px}
.branch-heading h1{margin:0;font-size:clamp(42px,5.2vw,66px);font-weight:400;line-height:1.12;letter-spacing:-1.6px}
.branch-heading h1 span{color:#ff9800}
.intro{max-width:495px;margin:28px 0 0;font-size:20px;line-height:1.65;color:#e1e2e1}
.text-link{display:inline-block;margin-top:24px;text-decoration:none;border-bottom:1px solid #ff9800;padding-bottom:4px}
.text-link span{color:#ff9800;margin-left:12px}
.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:34px}
h2{font-weight:400;font-size:28px;margin:0}
h3{font-weight:400}
.aside{font-size:14px;color:#b7bbbb}
.career-section,.listening-section{position:relative;max-width:900px}
.career-graph{list-style:none;padding:0;margin:0}
.milestone{position:relative;display:grid;grid-template-columns:150px 1fr;column-gap:44px;padding:0 0 34px}
.milestone:before{content:"";position:absolute;left:171px;top:13px;bottom:-13px;width:1px;background:#747777}
.milestone:after{content:"";position:absolute;left:165px;top:12px;width:11px;height:11px;border:1px solid #ff9800;background:#303537;border-radius:50%}
.milestone:last-child:before{display:none}
.milestone.current:after{background:#ff9800;box-shadow:0 0 0 5px #ff980017}
.date{color:#ffad33;font-size:15px;padding-top:4px}
.milestone>.date{text-align:right}
.milestone details{border-bottom:1px solid #ffffff20;padding-bottom:22px}
.milestone summary{display:flex;justify-content:space-between;align-items:start;gap:20px;cursor:pointer;list-style:none}
.milestone summary::-webkit-details-marker{display:none}
.role{font-size:25px;line-height:1.3}
.place{display:block;font-size:15px;color:#bfc3c3;margin-top:6px}
.expand{font-size:23px;color:#ff9800;line-height:1.2}
.milestone details[open] .expand{transform:rotate(45deg)}
.milestone-detail p{margin:17px 0 0;max-width:590px}
.dry-note{color:#bfc3c3;font-size:16px;font-style:italic}
.side-quest{grid-column:2;position:relative;margin:24px 0 0 36px;padding:0 0 0 24px;border-left:1px solid #ff980080;max-width:500px}
.side-quest:before{content:"";position:absolute;top:14px;left:-60px;width:59px;border-top:1px solid #ff980080}
.side-quest h3{margin:4px 0;font-size:21px}
.side-quest p{font-size:16px;margin:8px 0}
.graph-hint{font-size:13px;color:#b7bbbb;margin:0 0 0 194px}
.page-footer{display:flex;gap:28px;flex-wrap:wrap;border-top:1px solid #ffffff25;padding-top:25px;margin-top:70px;font-size:15px}
.page-footer a{text-decoration:none}
.page-footer span{color:#ff9800;padding-left:5px}
.track-list{border-top:1px solid #ffffff40}
.track{display:flex;gap:24px;align-items:center;padding:23px 0;border-bottom:1px solid #ffffff30;text-decoration:none}
.play{color:#ff9800;font-size:29px;width:32px;text-align:center}
.track strong{font-size:23px;font-weight:400;display:block;line-height:1.3}
.track small{color:#bfc3c3;font-size:15px;display:block;margin-top:5px}
.track-end{font-size:14px;margin-left:auto;color:#c5c8c8;white-space:nowrap}
.track-end span{margin-left:20px;color:#ff9800}
.offstage{margin-top:80px;max-width:900px}
.personal-notes{display:grid;grid-template-columns:1fr 1fr;gap:32px 60px;margin-top:28px}
.personal-notes article{position:relative;padding-top:16px;border-top:1px solid #ffffff25}
.personal-notes h3{font-size:23px;margin:10px 0}
.personal-notes p{color:#ccd0d0;margin:0}
.note-number{font-size:13px;color:#ffad33}
.writing-note{grid-column:1/-1;max-width:650px}

@media(max-width:720px){.branch-shell{padding:24px 24px 30px}
.branch-heading{padding:56px 0 60px}
.branch-heading h1{font-size:clamp(37px,8.5vw,54px);letter-spacing:-1px}
.intro{font-size:18px}
.branch-page::before{left:0;height:680px;opacity:.55}
.branch-page::after{height:680px;background:linear-gradient(90deg,#303537c9,transparent)}
.section-heading{display:block;margin-bottom:26px}
.aside{display:block;margin-top:6px}
.milestone{grid-template-columns:1fr;padding:0 0 32px 28px;gap:10px}
.milestone>.date{text-align:left}
.milestone:before{left:5px;top:14px;bottom:-14px}
.milestone:after{left:0;top:13px}
.role{font-size:23px}
.side-quest{grid-column:1;margin-left:0;padding-left:18px}
.side-quest:before{left:-23px;width:22px}
.graph-hint{margin-left:28px}
.track{gap:12px;padding:20px 0}
.track strong{font-size:20px}
.track-end{font-size:12px}
.track-end span{margin-left:6px}
.personal-notes{grid-template-columns:1fr;gap:30px}
.writing-note{grid-column:auto}
.offstage{margin-top:56px}
.page-footer{margin-top:50px;gap:20px}
.play{width:24px}
.track small{font-size:13px}
}

@media(prefers-reduced-motion:reduce){a{transition:none}
}


/* Both path introductions: a section title followed by conversational body-size text. */
.branch-scientist .scientist-intro h1, .branch-mandar .personal-intro h1 { font-size: 17px; line-height: 1.65; letter-spacing: normal; font-weight: 400; }
.branch-heading .section-title { margin: 0 0 24px; }
.milestone-origin { padding: 3px 0 22px; border-bottom: 1px solid #ffffff20; }

.branch-scientist .scientist-intro h1 .question-or { display: block; text-align: center; color: inherit; margin: 0.15em 0; }

.branch-scientist .scientist-intro h1 .question-first { display: block; width: fit-content; max-width: 100%; color: inherit; }

/* Featured paper: retain the original scientific colors and readable plot backgrounds. */
.paper-feature { margin-top: 88px; padding-top: 48px; border-top: 1px solid #ffffff30; }
.paper-feature h2 { max-width: 850px; font-size: clamp(28px, 3.3vw, 42px); line-height: 1.25; letter-spacing: -0.6px; }
.paper-feature h2 em { color: #ff9800; }
.paper-name { color: #ffad33; font-family: "Ubuntu Mono", monospace; font-size: 16px; margin: 24px 0; }
.paper-copy { max-width: 800px; color: #d5d8d8; }
.paper-copy p { margin: 0 0 20px; }
.paper-figure { margin: 34px 0; }
.paper-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.paper-panels figure { margin: 0; min-width: 0; }
.paper-panels a { display: block; background: white; }
.paper-panels img { display: block; width: 100%; height: auto; }
.paper-panels figcaption { font-size: 16px; padding-top: 12px; }
.paper-panels figcaption span { color: #ffad33; font-family: "Ubuntu Mono", monospace; margin-right: 6px; }
.paper-caption { color: #bfc3c3; font-size: 14px; margin-top: 20px; max-width: 800px; }
.paper-feature .text-link { margin-top: 4px; }
@media (max-width: 720px) {
  .paper-feature { margin-top: 60px; padding-top: 32px; }
  .paper-panels { grid-template-columns: 1fr; gap: 26px; max-width: 480px; }
}

/* Timeline entries are always visible. */
.milestone-body { border-bottom: 1px solid #ffffff20; padding-bottom: 22px; }
.milestone-heading { margin: 0; font-weight: 400; line-height: 1.3; }
.paper-feature .paper-name { margin-bottom: 8px; }
.paper-feature > .text-link { margin: 0 0 28px; }
.paper-takeaway { color: #ff9800; font-size: clamp(22px, 2.5vw, 30px); line-height: 1.4; margin: 30px 0 20px; }

/* Native modal keeps keyboard focus inside the enlarged figure. */
html.figure-is-open { overflow: hidden; }
.figure-lightbox { border: 0; padding: 56px 16px 12px; background: #303537; color: #ececeb; width: max-content; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); border-radius: 6px; box-shadow: 0 16px 64px #0008; }
.figure-lightbox::backdrop { background: #000c; }
.figure-enlarged { display: block; width: auto; height: auto; max-width: min(1200px, calc(100vw - 64px)); max-height: calc(100dvh - 150px); object-fit: contain; background: white; margin: auto; }
.figure-close { position: absolute; top: 6px; right: 8px; display: grid; place-items: center; width: 44px; height: 44px; padding: 8px; border: 0; background: transparent; color: white; cursor: pointer; }
.figure-close svg { width: 28px; height: 28px; }
.figure-close:hover { color: #ff9800; }
.figure-close:focus-visible { outline: 2px solid #ff9800; outline-offset: -3px; border-radius: 3px; }
.figure-label { margin: 10px 0 0; text-align: center; font-size: 16px; }
.paper-panels a { cursor: zoom-in; }

.ai-conversation { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 64px; padding: 36px 0 24px; border-top: 1px solid #ffffff30; border-bottom: 1px solid #ffffff30; }
.conversation-copy p { margin: 16px 0 0; }
.conversation-copy .accent { color: #ff9800; }
.conversation-icons { display: flex; flex: 0 0 auto; align-items: center; }
.conversation-icons a { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 128px; height: 128px; margin: 0 2px; color: white; border-radius: 4px; font-size: 52px; text-decoration: none; transition: all .5s; }
.conversation-icons a:hover, .conversation-icons a:focus-visible { transform: scale(1.5) translateY(2px); color: white; }
.conversation-icons a span { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); margin: 26px 0; padding: 5px 7px; border-radius: 8px; background: white; color: #000; font: 100 9px/normal "Ubuntu Mono", monospace; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: all .5s cubic-bezier(.68,-.55,.265,1.55); }
.conversation-icons a span::after { content: ""; position: absolute; left: calc(50% - 5px); bottom: -5px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid white; }
.conversation-icons a:hover span, .conversation-icons a:focus-visible span { bottom: 80px; opacity: 1; visibility: visible; }
@media (max-width: 720px) {
  .ai-conversation { margin-top: 48px; gap: 16px; }
  .conversation-icons a { width: 56px; height: 64px; font-size: 32px; }
  .conversation-icons a:hover span, .conversation-icons a:focus-visible span { bottom: 48px; }
}
@media (prefers-reduced-motion: reduce) { .conversation-icons a, .conversation-icons a span { transition: none; } }

.branch-bottom-nav { margin-top: 32px; padding-top: 8px; }

.music-title { margin: 0 0 24px; }
/* Top-level section titles share one size across both path pages. */
.branch-page .section-title { font-size: clamp(34px, 4vw, 44px); font-weight: 500; letter-spacing: -0.5px; line-height: 1.2; }
.music-aside { margin: 24px 0 0; font-size: 17px; line-height: 1.65; }
.music-aside em { color: #ff9800; }

.personal-intro .text-link em { color: #ff9800; font-style: normal; }
.branch-mandar .personal-intro h1 em { font-style: normal; }
.soft-heading { display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: 0.3em; }
.soft-heading .soft-aside { font-size: 0.6em; color: #c5c8c8; position: relative; top: 0.15em; }
/* Same muted, under-the-breath voice as .soft-aside, for asides inside body copy. */
.hint-aside { font-size: 0.8em; color: #c5c8c8; }
.branch-mandar #offstage-title em { font-style: italic; }
.offstage-copy { max-width: 800px; margin: 24px 0 0; }
.offstage-copy .accent { color: #ff9800; }
.section-title .accent { color: #ff9800; }
.section-heading .accent { color: #ff9800; }
.happiest-section, .still-music-section, .wood-part { max-width: 900px; margin-top: 72px; }
.happiest-section .section-heading, .still-music-section .section-heading, .wood-part .section-heading { margin-bottom: 0; }
@media (max-width: 720px) { .happiest-section, .still-music-section, .wood-part { margin-top: 56px; } }
/* Wood section: the first part sits closer to the main title; photos/videos follow the album-art look. */
.wood-section .section-title + .wood-part { margin-top: 40px; }
.wood-media { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 20px; max-width: 800px; margin: 32px 0 8px; }
.wood-media figure { margin: 0; min-width: 0; }
.wood-media a { display: block; cursor: zoom-in; }
.wood-media img, .wood-media video { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 12px 40px #0006; background: #262a2b; }
.wood-media figcaption { margin-top: 10px; font: 14px/1.4 "Ubuntu Mono", monospace; color: #b7bbbb; }
.wood-media figcaption s, .figure-label s { opacity: 0.7; }
.bucket-list { padding-left: 1.2em; }
.bucket-list li { margin: 6px 0; padding-left: 4px; }
.bucket-list li::marker { color: #ff9800; }
/* Closing "I think I like Manny" landing spot (homepage heart links to #page-bottom). */
@media (max-width: 720px) { .like-manny { flex-direction: column; align-items: flex-start; } .like-manny .conversation-icons { margin-left: -12px; } }
/* Columns proportional to each clip's aspect ratio (16:9 neck, 9:16 body) so both play at the same height. */
.wood-videos { grid-template-columns: 1.778fr 0.5625fr; }
@media (max-width: 720px) {
  .wood-media { gap: 12px; }
  .wood-videos { grid-template-columns: 1fr; gap: 24px; }
  .wood-video-portrait { width: min(100%, 240px); }
}
/* Inline "find me on" line: copy followed by a homepage-style contact icon. */
.social-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.social-row .offstage-copy { margin: 0; }
/* Compact icon sized to sit alongside body text (hover/tooltip behaviour unchanged). */
.social-row .conversation-icons a { width: 36px; height: 36px; font-size: 24px; }
.social-row .conversation-icons a span { margin: 0; }
.social-row .conversation-icons a:hover span, .social-row .conversation-icons a:focus-visible span { bottom: 36px; }
.album-art { margin: 28px 0 0; max-width: 800px; }
.album-art a { display: block; width: min(100%, 340px); margin: 0 auto; cursor: zoom-in; }
.album-art img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 12px 40px #0006; }
@media (max-width: 720px) { .album-art a { width: min(100%, 260px); } }
.figure-label:empty { display: none; }
/* Small, unobtrusive link to the private analytics page (manny.php). */
.conversation-copy .manny-link { margin-top: 12px; font-size: 14px; }
.manny-link a { color: #b7bbbb; }
.manny-link a:hover { color: #ff9800; }
/* Scientist page opens directly with its first section: keep the breathing room the old intro gave. */
.branch-scientist main > section:first-child { padding-top: 72px; }
@media (max-width: 720px) { .branch-scientist main > section:first-child { padding-top: 40px; } }
.milestone-detail .accent, .side-quest .accent { color: #ff9800; }
/* "Interested in hiring Mandar?" opener on the scientist page. */
.hire-section { max-width: 770px; margin-bottom: 72px; }
.hire-section p { margin: 20px 0 0; }
.hire-section .accent { color: #ff9800; }
.hire-section a { color: #ff9800; text-decoration: none; border-bottom: 1px solid #ff980080; }
.hire-section a:hover { border-bottom-color: #ff9800; }