/* Full-viewport opening and interactive CV, with the original content as fallback. */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.brand-mark{transform:none;background:none;border:0;color:var(--cyan);font-size:16px;width:auto;height:auto;border-radius:0;letter-spacing:-.04em}
.brand{min-width:32px}.site-nav{background:#0b0b09de}
.hero,.scroll-cinema .scroll-scene{padding-top:0}
.hero-sticky,.scroll-cinema .hero-sticky{height:100svh;min-height:540px;padding-top:0;overflow:hidden}
.hero-sticky>.wrap{max-width:none;padding:0;height:100%;position:relative}
.hero-grid{display:block;position:relative;height:100%;width:100%;isolation:isolate}
.field-image,.scroll-cinema .field-image{position:absolute;inset:0;width:100%;height:100%;margin:0;border:0;transform:none;animation:none;z-index:-1;transform-origin:center}
.field-image img{width:100%;height:100%;object-fit:cover;object-position:center 28%;filter:saturate(.72) brightness(.76)}
.field-image::after{background:linear-gradient(180deg,#0b0b0930 20%,#0b0b0900 40%,#0b0b09d9 100%),linear-gradient(90deg,#0b0b0960,transparent 65%)}
.hero-copy,.scroll-cinema .hero-copy{position:absolute;left:var(--gutter);bottom:125px;z-index:2;padding:0;animation:none;transform:translateY(calc(var(--journey,0)*-45px));opacity:calc(1 - var(--journey,0)*.7);max-width:calc(100% - var(--gutter)*2)}
.hero .hero-sub{font-size:clamp(20px,2.4vw,32px);color:var(--ink);line-height:1.4;letter-spacing:-.035em;max-width:none;margin-bottom:24px;text-shadow:0 2px 20px #0009}
.hero .hero-actions{gap:12px}.hero .btn-ghost{background:#0b0b0960;border-color:#ffffff60}
.hero-bottom,.scroll-cinema .hero-bottom{position:absolute;z-index:2;left:var(--gutter);right:var(--gutter);bottom:0;margin:0;padding:24px 0;color:#d2d0c3;opacity:1;font-size:10px}
.scroll-cinema .scroll-scene{height:155vh}
.scroll-cinema .field-image{transform:scale(calc(1 + var(--journey,0)*.18)) translateY(calc(var(--journey,0)*-2%));will-change:transform}
.scroll-cinema .field-image img{filter:saturate(calc(.72 + var(--journey,0)*.28)) brightness(.76)}
#photos .section-head h2,.scroll-cinema #photos h2,#cv .section-head h2{font-size:clamp(32px,3vw,43px)}
.contact h2{font-size:clamp(48px,5vw,66px);line-height:.95}
.cv-columns{grid-template-columns:1fr}.contact-grid{margin-top:0;grid-row:auto;padding-top:25px}
.social-links{gap:12px}.social-links a{width:42px;height:42px;display:grid;place-items:center;padding:0;border:1px solid var(--line);color:var(--ink);transition:color .2s,border-color .2s,transform .2s}
.social-links a:hover{color:var(--cyan);border-color:var(--cyan);transform:translateY(-3px)}.social-links svg{width:21px;height:21px}
/* Work history: date rail + animated panels. All articles remain visible without JS. */
.timeline.is-interactive{padding:26px!important;overflow:hidden;position:relative}
.timeline-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;font:10px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.timeline-controls{display:flex;gap:8px}.timeline-controls button{width:34px;height:34px;background:transparent;color:var(--ink);border:1px solid var(--line)}
.timeline-controls button:hover{border-color:var(--cyan);color:var(--cyan)}.timeline-controls button:disabled{opacity:.25;cursor:default}
.timeline-dates{display:grid;grid-template-columns:repeat(var(--role-count,4),minmax(0,1fr));position:relative;margin-bottom:10px;gap:4px}
.timeline-dates::before{content:"";height:1px;background:var(--line);position:absolute;left:12%;right:12%;top:36px}
.timeline-date{position:relative;background:none;border:0;color:var(--muted);padding:0 2px 26px;font:12px var(--mono)}
.timeline-date::after{content:"";position:absolute;width:7px;height:7px;background:#48483e;border:3px solid var(--panel);box-sizing:content-box;bottom:0;left:calc(50% - 6px);border-radius:50%;transition:background .3s,box-shadow .3s}
.timeline-date[aria-selected=true]{color:var(--cyan)}.timeline-date[aria-selected=true]::after{background:var(--cyan);box-shadow:0 0 17px #ffffff40}
.timeline-scrub{display:block;width:100%;accent-color:var(--cyan);height:20px;margin:12px 0 20px;cursor:ew-resize}
.timeline-scrub{appearance:none;background:transparent}
.timeline-scrub::-webkit-slider-runnable-track{height:2px;background:#f2f0e535}
.timeline-scrub::-webkit-slider-thumb{appearance:none;width:15px;height:15px;margin-top:-6px;border-radius:50%;background:var(--cyan);border:3px solid var(--panel);box-shadow:0 0 0 1px var(--cyan)}
.timeline-scrub::-moz-range-track{height:2px;background:#f2f0e535}
.timeline-scrub::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--cyan);border:3px solid var(--panel);box-shadow:0 0 0 1px var(--cyan)}
.timeline.is-interactive .role{padding:15px 0 0;border:0;min-height:310px;animation:career-arrive .55s cubic-bezier(.16,1,.3,1)}
.timeline.is-interactive .role[hidden]{display:none}.timeline.is-interactive .role h3{font-size:24px}.timeline.is-interactive .role ul{margin-bottom:0}
@keyframes career-arrive{from{opacity:0;transform:translateX(35px) scale(.985)}to{opacity:1;transform:none}}
/* Skills tree: a quiet moving network, with stable readable labels. */
.skills-panel.skills-map{position:relative;display:grid;grid-template-columns:130px 235px minmax(0,1fr);gap:55px;align-items:center;border-block:1px solid var(--line);padding:48px 0;isolation:isolate;min-height:360px}
.skills-map .skills-root{font:600 30px var(--body);letter-spacing:-.04em;margin:0;padding:20px 0;color:var(--ink)}
.skills-categories{display:flex;flex-direction:column;gap:14px}
.skill-category{position:relative;text-align:left;padding:13px 15px;font:12px/1.5 var(--mono);color:var(--muted);background:var(--bg);border:1px solid var(--line);transition:border-color .25s,color .25s,transform .25s}
.skill-category[aria-selected=true]{color:var(--cyan);border-color:#ffffff90;transform:translateX(5px)}
.skill-children{align-self:center;min-width:0}.skills-map .skill-group{margin:0;animation:skill-arrive .45s ease both}.skills-map .skill-group[hidden]{display:none}
.skills-map .skill-group h4{color:var(--cyan);margin:0 0 20px;font-size:11px}
.skills-map .tags{gap:10px}.skills-map .tags span{background:#141411;font-size:12px;padding:9px 12px;line-height:1.7;animation:skill-arrive .45s ease both;animation-delay:calc(var(--node-index,0)*25ms)}
.skills-wires{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;overflow:visible}
.skills-wires path{fill:none;stroke:#f2f0e525;stroke-width:1}.skills-wires .wire-active{stroke:#ffffff80;stroke-dasharray:5 10;animation:wire-flow 3s linear infinite}
@keyframes wire-flow{to{stroke-dashoffset:-45}}@keyframes skill-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:1100px){.skills-panel.skills-map{grid-template-columns:95px 205px minmax(0,1fr);gap:28px}.skills-map .skills-root{font-size:24px}}
@media(max-width:800px){.hero-sticky{min-height:540px}.skills-panel.skills-map{grid-template-columns:1fr;gap:25px;padding:30px 0}.skills-map .skills-root{padding:0}.skills-categories{display:grid;grid-template-columns:1fr 1fr;gap:10px}.skill-category[aria-selected=true]{transform:none}.skills-wires{display:none}.timeline.is-interactive .role{min-height:0}.skill-children{min-height:240px}}
@media(max-width:560px){.hero-copy,.scroll-cinema .hero-copy{bottom:140px}.hero-bottom{gap:9px;flex-direction:row;flex-wrap:wrap}.hero .hero-sub{font-size:23px;max-width:20ch}.hero .hero-actions{flex-wrap:wrap}.hero .field-image{margin:0;height:100%}.timeline.is-interactive{padding:20px!important}.timeline.is-interactive .role h3{font-size:21px}.timeline-date{font-size:11px}.skill-category{font-size:10px;padding:12px}.skills-map .tags span{font-size:11px}.contact h2{font-size:50px}}
@media(prefers-reduced-motion:reduce){.scroll-cinema .field-image,.hero-copy{transform:none!important}.skills-wires .wire-active,.timeline.is-interactive .role,.skills-map .tags span{animation:none}}

/* Softer surfaces: restrained depth, without a colored glow. */
.timeline,.signal-form{
  border-radius:16px;
  border-color:#f2f0e51b;
  background:linear-gradient(145deg,#191915,#121210 75%);
  box-shadow:0 12px 32px -18px #0009,inset 0 1px 0 #ffffff04;
}
.gallery figure{border-radius:12px;border-color:#f2f0e51b;box-shadow:0 8px 18px -14px #0009}
.skill-category,.skills-map .tags span,.tags span{
  border-radius:8px;
  box-shadow:0 5px 12px -9px #0009,inset 0 1px 0 #ffffff03;
}
.btn,.signal-send,.signal-types span,.carousel-btn,.timeline-controls button,.social-links a{border-radius:8px}
.signal-form textarea,.signal-form input:not([type=radio]):not([type=hidden]){border-radius:9px}
.lightbox img{border-radius:10px}

/* Generous grab targets, plus a small spring on the role-card wrapper. */
.timeline-dates,.timeline-stage{cursor:grab;touch-action:pan-y}
.timeline-date{min-height:56px;padding:9px 5px 24px;border-radius:8px;cursor:grab;transition:background .2s,color .2s}
.timeline-date:hover{background:#ffffff09}
.timeline-dates::before{top:auto;bottom:6px}
.timeline-date::after{width:9px;height:9px;left:calc(50% - 7px)}
.timeline.is-dragging,.timeline.is-dragging *{cursor:grabbing!important;user-select:none}
.timeline-stage{transform-origin:50% 25%;will-change:transform}
.timeline-scrub{height:42px;margin:6px 0 15px;cursor:grab;touch-action:pan-y}
.timeline-scrub:active{cursor:grabbing}
.timeline-scrub::-webkit-slider-runnable-track{height:4px;border-radius:3px}
.timeline-scrub::-webkit-slider-thumb{width:25px;height:25px;margin-top:-10.5px;border-width:5px;box-shadow:0 0 0 1px #ffffff90,0 0 0 7px #ffffff08}
.timeline-scrub::-moz-range-track{height:4px;border-radius:3px}
.timeline-scrub::-moz-range-thumb{width:15px;height:15px;border-width:5px;box-shadow:0 0 0 1px #ffffff90,0 0 0 7px #ffffff08}
.timeline-controls button{width:42px;height:42px;border-radius:9px}

/* The heading doubles as a shortcut to the message field. */
.contact-call{display:inline-flex;align-items:center;gap:22px;text-decoration:none;border-radius:8px}
.call-icon{width:76px;height:76px;flex:none;color:var(--cyan);overflow:visible;transition:transform .35s ease}
.call-handset{transform-origin:33px 43px}
.call-wave{opacity:.25;transform-origin:43px 39px}
.contact-call:is(:hover,:focus-visible,:active) .call-icon{transform:translateY(-3px)}
.contact-call:is(:hover,:focus-visible,:active) .call-handset{animation:phone-ring 1.4s ease-in-out infinite}
.contact-call:is(:hover,:focus-visible,:active) .call-wave{animation:phone-signal 1.6s ease-out infinite}
.contact-call .wave-two{animation-delay:.18s!important}
.contact-call .wave-three{animation-delay:.36s!important}
@keyframes phone-ring{0%,40%,100%{transform:rotate(0)}8%,24%{transform:rotate(-8deg)}16%,32%{transform:rotate(7deg)}}
@keyframes phone-signal{0%{opacity:.15;transform:scale(.94)}30%{opacity:1}75%,100%{opacity:.15;transform:scale(1.06)}}
@media(max-width:560px){.contact-call{gap:18px}.call-icon{width:62px;height:62px}}
@media(prefers-reduced-motion:reduce){.contact-call .call-handset,.contact-call .call-wave{animation:none!important}.contact-call:is(:hover,:focus-visible,:active) .call-wave{opacity:1}.contact-call:is(:hover,:focus-visible,:active) .call-icon{transform:none}}

/* Centered photographic viewer. Portraits and landscapes retain their complete frame. */
.site-nav .nav-links{margin-left:auto;margin-right:0}.site-nav .menu-toggle{margin-left:auto}
.scroll-cinema #photos{height:auto;padding-top:85px}
.scroll-cinema #photos>.wrap{position:relative;top:auto}
.photo-viewer{position:relative;min-width:0}
.photo-viewer .carousel-top{margin-top:24px}
#photos-gallery,.scroll-cinema #photos-gallery{display:flex;align-items:center;gap:24px;padding:20px 18% 24px;scroll-snap-type:x mandatory;scroll-padding-inline:18%;scrollbar-width:none;cursor:grab;border:1px solid #ffffff0d;border-radius:18px;background:radial-gradient(ellipse at center,#24241c55,transparent 70%),#0e0e0c;}
#photos-gallery::-webkit-scrollbar{display:none}
#photos-gallery figure,#photos-gallery figure:nth-child(3n + 2){flex:0 0 100%;margin:0;scroll-snap-align:center;border:0;background:transparent;box-shadow:none;border-radius:10px;opacity:.35;transform:scale(.91);transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1);cursor:pointer}
#photos-gallery figure.is-current{opacity:1;transform:scale(1);cursor:zoom-in}
#photos-gallery img,.scroll-cinema #photos-gallery img{width:100%;height:clamp(300px,52vh,560px);object-fit:contain;object-position:center;filter:none;border-radius:10px;transform:none}
#photos-gallery figure:hover img{transform:none;filter:none}
#photos-gallery figure.is-before img{object-position:right center}
#photos-gallery figure.is-after img{object-position:left center}
#photos-gallery.dragging{scroll-snap-type:none;cursor:grabbing;user-select:none}
#photos-gallery.dragging *{cursor:grabbing;pointer-events:none}
.photo-thumbnails{display:flex;position:relative;gap:8px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#ffffff40 transparent;padding:17px 3px 10px;overscroll-behavior-x:contain}
.photo-thumbnails button{flex:0 0 52px;width:52px;height:48px;padding:3px;border:1px solid transparent;border-radius:7px;background:#151510;opacity:.45;transition:opacity .2s,border-color .2s}
.photo-thumbnails button[aria-current=true]{border-color:var(--cyan);opacity:1}.photo-thumbnails button:hover{opacity:1}
.photo-thumbnails img{width:100%;height:100%;object-fit:cover;border-radius:4px}
.viewer-footer{display:flex;justify-content:space-between;gap:15px;color:var(--muted);font:10px/1.6 var(--mono);margin-top:7px}
@media(max-width:560px){#photos-gallery,.scroll-cinema #photos-gallery{padding-inline:7%;scroll-padding-inline:7%;gap:12px;border-radius:12px}#photos-gallery img,.scroll-cinema #photos-gallery img{height:380px;max-height:55vh}.photo-thumbnails button{flex-basis:44px;width:44px;height:42px}.viewer-footer{font-size:8px}.viewer-footer span:last-child{display:none}}

/* A continuous, centered filmstrip: the photographs are the interface. */
.flow-viewer{--film-height:clamp(280px,48vh,470px)}
.flow-viewer .carousel-top{gap:18px}.flow-viewer .carousel-controls{margin-left:auto}
.flow-pause{background:none;border:1px solid var(--line);border-radius:8px;color:var(--muted);padding:12px;font:10px var(--mono);cursor:pointer}
.flow-pause:hover{color:var(--cyan);border-color:var(--cyan)}
.flow-viewer #photos-gallery{padding:28px 28px 34px;gap:22px;scroll-snap-type:none;scroll-behavior:auto;scroll-padding:28px;border:0;background:none;border-radius:0;overflow-x:auto;align-items:center;mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent)}
.flow-viewer #photos-gallery figure,.flow-viewer #photos-gallery figure:nth-child(3n + 2){position:relative;flex:0 0 auto;width:calc(var(--film-height)*var(--photo-ratio,.75));height:var(--film-height);opacity:.8;transform:none;transition:opacity .5s;overflow:visible}
.flow-viewer #photos-gallery figure.is-current,.flow-viewer #photos-gallery figure:hover{opacity:1}
.flow-viewer #photos-gallery img{height:100%;width:100%;object-fit:contain;object-position:center!important;border-radius:12px;box-shadow:0 14px 28px -18px #000b}
.flow-number{position:absolute;bottom:-25px;left:2px;font:9px var(--mono);letter-spacing:.12em;color:var(--muted);opacity:.6}
.flow-viewer .viewer-footer{border-top:1px solid var(--line);padding-top:16px}
@media(max-width:560px){.flow-viewer{--film-height:clamp(250px,45vh,360px)}.flow-viewer #photos-gallery{padding-inline:10px;gap:14px}.flow-viewer #photos-gallery img{max-height:none}.flow-viewer .carousel-top{gap:8px}.flow-pause{font-size:9px;padding:10px}.flow-viewer .carousel-hint{font-size:8px}}

/* The real range remains keyboard/touch accessible beneath a spring-driven handle. */
.timeline-scrub-wrap{position:relative;margin:6px 0 15px}
.timeline-scrub-wrap .timeline-scrub{margin:0}
.timeline-scrub-wrap .timeline-scrub::-webkit-slider-thumb{background:transparent;border-color:transparent;box-shadow:none}
.timeline-scrub-wrap .timeline-scrub::-moz-range-thumb{background:transparent;border-color:transparent;box-shadow:none}
.timeline-float-thumb{pointer-events:none;position:absolute;left:0;top:8.5px;width:25px;height:25px;border:5px solid var(--panel);border-radius:50%;background:var(--cyan);box-shadow:0 0 0 1px #ffffff90,0 0 0 7px #ffffff08;will-change:transform}
.timeline-scrub:focus-visible + .timeline-float-thumb{outline:2px solid var(--ink);outline-offset:6px}
.flow-viewer #photos-gallery .flow-number{display:block;padding:0;border:0;background:none;line-height:1.4;height:auto}
.timeline-dates::before{left:calc(50% / var(--role-count,4));right:calc(50% / var(--role-count,4))}
@media(max-width:560px){.timeline-dates{gap:0}.timeline-date{font-size:10px;padding-inline:1px}}

/* Show the complete portrait, with space for the introduction beside it. */
.field-image,.scroll-cinema .field-image{inset:96px 5vw 94px 34vw;width:auto;height:auto;transform:none;will-change:auto;background:transparent;overflow:visible}
.field-image img,.scroll-cinema .field-image img,.field-image:hover img{object-fit:contain;object-position:center;transform:none;filter:none}
.field-image::after{display:none}
.hero-copy,.scroll-cinema .hero-copy{max-width:28vw;bottom:150px}
.hero .hero-sub{font-size:clamp(23px,2.1vw,32px);max-width:18ch}
.hero-sticky{background:radial-gradient(ellipse at 70% 45%,#20201c55,transparent 65%),var(--bg)}
/* Quieter small caps replace the condensed display lettering. */
.section-head h2,#photos .section-head h2,.scroll-cinema #photos h2,#cv .section-head h2,.contact h2{font-family:var(--body);font-weight:500;font-size:clamp(30px,2.8vw,40px);font-variant-caps:all-small-caps;line-height:1.15;letter-spacing:.035em;text-transform:none}
.section-head h2 .outline-type,.contact h2 .outline-type{color:var(--ink);-webkit-text-stroke:0}
#photos .section-head p{font-family:'Roboto',Arial,sans-serif;font-weight:300;font-size:16px;line-height:1.85}
@media(max-width:800px){
  .field-image,.scroll-cinema .field-image{inset:82px 20px 210px;width:auto;height:auto;margin:0}
  .hero-copy,.scroll-cinema .hero-copy{left:var(--gutter);bottom:85px;max-width:calc(100% - var(--gutter)*2)}
  .hero .hero-sub{font-size:21px;max-width:none;margin-bottom:15px}
  .hero .hero-actions .btn{min-height:40px;padding:9px 16px}
  .hero-bottom,.scroll-cinema .hero-bottom{padding:16px 0}
}
@media(max-width:800px){.hero .field-image,.scroll-cinema .hero .field-image{height:auto;inset:82px 20px 210px}}

/* Each year gets one column, even if an older script is still cached. */
.timeline-dates{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.timeline-date{white-space:nowrap;min-width:0}
.timeline.is-interactive{min-width:0;transform-origin:50% 35%}
a[download]{white-space:nowrap;word-spacing:.12em}