/* A scrapbook timeline: seven chapters connected by one continuous thread. */
#experience{background:radial-gradient(ellipse at 90% 15%,#f8e9da55,transparent 50%),#eecdc7}
#experience>.panel-content{padding-top:90px;padding-bottom:85px;max-width:1680px}
#experience .journey-heading{align-items:flex-end;gap:45px;margin-bottom:28px}
#experience .journey-heading h2{font-size:clamp(54px,6.8vw,98px)}
.story-intro{max-width:285px;margin-bottom:8px}
.story-intro p{font-size:14px;line-height:1.55;margin:0}
.story-intro .handwritten{display:block;text-align:right;color:#9a4f58;transform:rotate(-7deg);font-size:29px;margin-top:18px}
.story-route{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 0 20px;border-top:1px solid #683d3728}
.story-route>span:first-child{font-size:9px;letter-spacing:.12em;line-height:1.6;display:flex;align-items:center;gap:15px}
.story-route svg{width:48px;height:23px;stroke:#9a4f58;stroke-width:1.7;fill:none;flex:none}
.story-route-note{font-size:10px;line-height:1.5;opacity:.6;text-align:right}
.story-timeline{--story-card-width:clamp(280px,27vw,360px);--story-gap:38px;position:relative}
.story-scroll{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x pan-y;cursor:grab;outline-offset:8px}
.story-scroll::-webkit-scrollbar{display:none}
.story-track{position:relative;width:max-content;--story-view-width:1000px}
.story-list{list-style:none;margin:0;padding:20px 0 25px;display:flex;align-items:flex-start;gap:var(--story-gap);position:relative}
.story-list:after{content:'';flex:0 0 max(0px,calc(var(--story-view-width) - var(--story-card-width) - var(--story-gap)));pointer-events:none}
.story-chapter{width:var(--story-card-width);flex:0 0 var(--story-card-width);min-width:0;position:relative;scroll-snap-align:start}
.chapter-time{height:65px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 10px 12px 4px}
.chapter-year{font-family:var(--serif);font-size:39px;font-weight:300;letter-spacing:-.06em;color:var(--chapter-accent);white-space:nowrap;line-height:1.1}
.chapter-index{font-size:8px;letter-spacing:.12em;white-space:nowrap;opacity:.6}
.story-chapter:nth-child(4) .chapter-year{font-size:28px;font-family:Hand;letter-spacing:0}
.story-chapter:nth-child(6) .chapter-year{font-size:32px}
.chapter-art{height:236px;position:relative;margin:0 6px}
.story-postcard{position:absolute;inset:9px 13px 8px 4px;background:#fff8ed;padding:10px 10px 0;border:1px solid #8f635017;box-shadow:0 8px 17px #7d3d271c;transform:rotate(var(--postcard-turn));transition:transform .6s var(--ease),box-shadow .6s var(--ease);transform-origin:50% 90%;border-radius:2px}
.story-postcard img{width:100%;height:calc(100% - 30px);object-fit:cover;object-position:center 45%;pointer-events:none;user-select:none;-webkit-user-drag:none}
.postcard-caption{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:7px;letter-spacing:.04em;height:30px;color:#564941}
.postcard-caption span:last-child{font-size:6px;opacity:.5;white-space:nowrap}
.story-tape{position:absolute;top:-11px;left:35%;width:78px;height:23px;background:linear-gradient(90deg,#e1c09999,#e3cbaa99,#e1c09999);backdrop-filter:blur(2px);transform:rotate(-4deg);clip-path:polygon(0 3%,98% 0,100% 95%,2% 100%,0 78%,2% 62%,0 46%);z-index:2}
.chapter-doodle{width:41px;height:41px;position:absolute;top:0;left:-3px;z-index:3;stroke:var(--chapter-accent);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;transform:rotate(-9deg);filter:drop-shadow(0 1px #fbe8dd)}
.chapter-stamp{position:absolute;bottom:-5px;right:-4px;width:95px;min-height:82px;border:1px solid var(--chapter-accent);border-radius:50%;padding:13px 8px;background:var(--chapter-paper);color:var(--chapter-accent);text-align:center;transform:rotate(8deg);box-shadow:0 4px 12px #6e33291a;display:flex;flex-direction:column;justify-content:center;z-index:3;transition:transform .6s var(--ease)}
.chapter-stamp strong{font-family:var(--serif);font-weight:400;font-size:25px;line-height:1;letter-spacing:-.04em}
.chapter-stamp span{display:block;font-size:7px;line-height:1.25;margin:6px auto 0;max-width:72px}
.story-chapter.is-current .story-postcard,.chapter-art:hover .story-postcard{transform:rotate(calc(var(--postcard-turn)*-.5)) translateY(-4px);box-shadow:0 12px 22px #7d3d2733}
.chapter-art:hover .chapter-stamp{transform:rotate(-5deg) translateY(-3px)}
.chapter-waypoint{height:76px;position:relative;margin-top:14px;display:flex;align-items:flex-start;gap:14px;padding:15px 4px 0}
.waypoint-circle{width:40px;height:34px;flex:none;display:grid;place-items:center;position:relative;z-index:2}
.waypoint-circle:before{content:'';width:26px;height:26px;position:absolute;left:7px;top:4px;border:1px solid var(--chapter-accent);background:#eecdc7;border-radius:50%;transition:transform .35s,background .35s}
.waypoint-circle i{width:6px;height:6px;border-radius:50%;background:var(--chapter-accent);position:relative;z-index:1}
.story-chapter.is-current .waypoint-circle:before{transform:scale(1.28);background:var(--chapter-paper);border-width:2px}
.story-chapter.is-current .waypoint-circle i{width:10px;height:10px}
.story-chapter.is-past .waypoint-circle:before{background:var(--chapter-accent)}
.story-chapter.is-past .waypoint-circle i{background:#f8e8de}
.waypoint-date{font-size:8px;letter-spacing:.035em;line-height:1.45;background:#eecdc7;margin-top:12px;padding:0 6px;position:relative;z-index:2}
.story-thread{position:absolute;inset:20px auto auto 0;pointer-events:none;z-index:1;overflow:visible}
.story-thread-path{fill:none;stroke-linecap:round;stroke-width:1.6;vector-effect:non-scaling-stroke}
#story-thread-base{stroke:#87534665;stroke-dasharray:4 6}
#story-thread-ink{stroke:#9c4d5e;stroke-width:2.2;transition:stroke-dashoffset .18s linear}
.chapter-copy{padding:0 10px 0 4px}
.chapter-company{font-size:9px;letter-spacing:.1em;font-weight:600;text-transform:uppercase;color:var(--chapter-accent);margin-bottom:13px}
.chapter-copy h3{font-family:var(--serif);font-size:33px;line-height:1.03;letter-spacing:-.045em;font-weight:350;min-height:2.06em;max-width:95%}
.chapter-role{font-size:10px;line-height:1.5;margin-top:13px;opacity:.7;min-height:30px}
.chapter-teaser{font-size:13px;line-height:1.55;margin-top:13px;max-width:96%;min-height:80px}
.chapter-more{margin-top:9px;font-size:12px;cursor:default}
.chapter-more summary{list-style:none;cursor:pointer;font-size:11px;border-top:1px solid #69413935;padding:14px 2px 12px 0;display:flex;justify-content:space-between;align-items:center;gap:15px}
.chapter-more summary::-webkit-details-marker{display:none}
.chapter-more summary>b{font-size:20px;font-weight:300;color:var(--chapter-accent);transition:transform .35s var(--ease)}
.chapter-more[open] summary>b{transform:rotate(45deg)}
.chapter-full{border-left:2px solid var(--chapter-accent);padding:5px 0 0 15px;animation:chapter-unfold .35s var(--ease)}
.chapter-full p{font-size:12px;line-height:1.65}
.chapter-full p+p{margin-top:13px}
.chapter-project{display:flex;width:100%;justify-content:space-between;align-items:center;gap:10px;font-size:11px;padding:13px 0 5px;margin-top:10px;border-top:1px solid #69413930;color:var(--chapter-accent);text-align:left}
.chapter-project span{font-size:23px}
.story-footer{display:flex;align-items:center;justify-content:space-between;gap:26px;border-top:1px solid #683d372b;padding-top:21px;margin-top:6px}
.story-position{min-width:180px}
.story-count{font-size:11px;letter-spacing:.05em;font-variant-numeric:tabular-nums}
.story-count b{font-weight:500}.story-count>span{opacity:.5}
#story-current-title{display:block;font-family:Hand;font-size:22px;line-height:1.1;color:#965060;transform:rotate(-3deg);margin-top:8px}
.story-stops{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.story-stop{font-size:8px;min-width:37px;min-height:40px;padding:7px 2px;display:flex;flex-direction:column;gap:9px;align-items:center;color:#61453f}
.stop-dot{width:5px;height:5px;border:1px solid #86564e77;background:transparent;border-radius:50%;transition:transform .3s,background .3s}
.story-stop[aria-current=true]{color:#983f57}
.story-stop[aria-current=true] .stop-dot{background:#9c4d5e;border-color:#9c4d5e;transform:scale(1.7)}
.story-stop:hover .stop-dot{background:#9c4d5e99}
.story-controls{display:flex;gap:10px}
.story-controls button{display:grid;place-items:center;flex:none;width:45px;height:45px;border:1px solid #75443b55;border-radius:50%;font-size:23px;transition:background .25s,opacity .25s}
.story-controls button:hover:not(:disabled){background:#734b47;color:#fff3e7}
.story-controls button:disabled{opacity:.25}
.story-endnote{display:flex;align-items:center;justify-content:flex-end;gap:12px;font-family:Hand;font-size:23px;color:#965060;transform:rotate(3deg);margin-top:28px}
.story-endnote svg{width:70px;height:28px;fill:none;stroke:currentColor;stroke-width:1.5}
#experience .recognition-notes{margin-top:45px;padding-top:28px;border-top:1px solid #683d3724}
.story-scroll.is-dragging,.story-scroll.is-wheeling{scroll-snap-type:none}
.story-scroll.is-dragging{cursor:grabbing;user-select:none}
.story-scroll.is-dragging .story-chapter{pointer-events:none}
.motion-off .story-postcard{transform:rotate(var(--postcard-turn))!important}
@keyframes chapter-unfold{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
@media(max-width:1100px){.story-intro{max-width:220px}.story-intro p{font-size:13px}.chapter-year{font-size:35px}.chapter-index{font-size:7px}.story-footer{gap:17px}.story-position{min-width:160px}.story-stops{gap:3px}.story-stop{min-width:32px}.story-chapter:nth-child(6) .chapter-year{font-size:28px}.chapter-copy h3{font-size:30px}}
@media(max-width:760px){
 #experience>.panel-content{padding-top:78px;padding-bottom:70px}
 #experience .journey-heading{margin-bottom:24px}
 #experience .journey-heading h2{font-size:clamp(47px,11.5vw,75px)}
 .story-intro{max-width:none;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:22px}
 .story-intro p{font-size:12px;max-width:190px}
 .story-intro .handwritten{font-size:22px;max-width:105px;margin:0;flex:none}
 .story-route{padding:14px 0 17px;align-items:flex-start}
 .story-route>span:first-child{font-size:7px;gap:8px;letter-spacing:.06em}
 .story-route svg{width:31px;height:18px}
 .story-route-note{font-size:8px;max-width:110px}
 .story-timeline{--story-card-width:calc(100vw - 82px);--story-gap:27px;margin-right:-8%}
 .story-list{padding-top:17px}
 .chapter-time{height:59px}
 .chapter-year{font-size:35px}
 .chapter-art{height:216px}
 .story-thread{top:17px}
 .story-chapter:nth-child(4) .chapter-year{font-size:26px}
 .story-chapter:nth-child(6) .chapter-year{font-size:30px}
 .chapter-copy h3{font-size:31px}
 .chapter-teaser{font-size:12px;min-height:80px}
 .chapter-stamp{width:86px;min-height:76px;padding:11px 7px}
 .chapter-stamp strong{font-size:23px}
 .chapter-stamp span{font-size:6.5px}
 .chapter-waypoint{height:71px;margin-top:12px}
 .waypoint-date{font-size:7px}
 .chapter-full p{font-size:12px}
 .story-footer{margin-right:8%;flex-wrap:wrap;gap:18px 15px;padding-top:17px}
 .story-position{min-width:0;flex:1}
 .story-stops{order:3;width:100%;justify-content:space-between;gap:2px}
 .story-stop{min-width:33px;font-size:8px;min-height:40px}
 #story-current-title{font-size:20px;max-width:210px}
 .story-controls button{width:42px;height:42px}
 .story-endnote{font-size:21px;margin-top:22px;justify-content:flex-start}
 .story-endnote svg{width:55px}
 #experience .recognition-notes{margin-top:35px;padding-top:25px}
}
@media(max-width:360px){
 #experience .journey-heading h2{font-size:43px}
 .story-intro{gap:12px}
 .story-intro p{font-size:11px}
 .story-intro .handwritten{font-size:19px;max-width:80px}
 .story-route>span:first-child{max-width:170px}
 .story-route-note{max-width:100px;font-size:7px}
 .chapter-copy h3{font-size:28px}
 .chapter-year{font-size:32px}
 .story-chapter:nth-child(6) .chapter-year{font-size:25px}
 .chapter-art{height:197px}
 .chapter-index{font-size:6px}
 .chapter-role{font-size:9px}
 .chapter-teaser{min-height:92px}
 .postcard-caption{font-size:6px}
 .postcard-caption span:last-child{font-size:5px}
 .chapter-stamp{right:-2px;width:80px;min-height:72px}
 .story-stop{min-width:27px;font-size:7px}
}
@media(prefers-reduced-motion:reduce){.story-postcard{transform:rotate(var(--postcard-turn))!important}}