/* Viewport stack with native scrolling inside each long section. */
.fullpage-study-ready { scroll-snap-type:none; scroll-padding:0; scroll-behavior:auto; overflow:hidden; height:100%; }
.fullpage-study-ready body{overflow:hidden;height:100%;overscroll-behavior:none}
.fullpage-study-ready .fullpage-study > main { display:block; position:fixed; inset:0; width:100%; height:var(--section-viewport,100svh); margin:0; padding:0; will-change:transform; }
.fullpage-study-ready .section-study-panel { display:block; position:relative; height:var(--section-viewport,100svh); background:var(--color-page); }
.fullpage-study-ready .section-study-grid {
 display:grid; grid-template-columns:repeat(var(--grid-columns),minmax(0,1fr));
 gap:var(--grid-gutter); width:var(--grid-width); margin-inline:auto;
 padding-block:calc(var(--page-top) + var(--space-section)) var(--space-section);
 min-height:100svh;
}
.fullpage-study .section-study-title{margin:0 0 var(--space-inline)}
/* The viewport grid owns minimum height. */
.fullpage-study .section-study-grid > :is(#about,#work,#non-work){min-height:0}
.fullpage-study #non-work .collection-content{padding-block:0}
.fullpage-study-ready [data-anchor="play"] .section-study-grid{padding-bottom:var(--space-inset)}
@media(max-width:600px),(max-height:600px){.fullpage-study-ready [data-anchor="play"] .section-study-grid{padding-bottom:calc(var(--space-section) + var(--space-inset))}}
.fullpage-study #about .section-study-title{margin-bottom:var(--space-section-heading)}
.fullpage-study #about .reading{padding-top:calc(var(--space-group) - var(--space-section-heading) / 2)}
@media(min-width:601px) and (min-height:601px){.fullpage-study-ready .section-study-grid{padding-top:calc(var(--page-top) + var(--space-section) + var(--space-inset))}}
.fullpage-study-ready .section-study-grid > * { grid-column:3 / -1; min-width:0; min-height:0; align-self:start; }
.fullpage-study-ready .collection-rail { position:fixed; z-index:2; top:calc(var(--page-top) + var(--space-section)); left:calc((100vw - var(--grid-width))/2); width:calc(var(--grid-track)*2 + var(--grid-gutter)); }
.fullpage-study-ready .collection-rail-inner { position:static; }
@media(min-width:1001px){.fullpage-study-ready .section-study-grid > *{grid-column:4 / -1}}
.fullpage-study-ready .section-study-overflow{height:100%;overflow-x:hidden;overflow-y:auto;overscroll-behavior:none;scrollbar-width:none;scroll-behavior:auto;outline:none}
.fullpage-study-ready .section-study-overflow::-webkit-scrollbar{display:none}
/* The controller forwards rail wheel input to the active overflow. */
@media(max-width:600px),(max-height:600px) {
 .fullpage-study .collection-rail{display:none}
 .fullpage-study-ready .section-study-grid{padding-top:calc(var(--space-section-mobile) + var(--space-section))}
 .fullpage-study #about>.grain-greeting{margin-bottom:var(--space-inset)}
 .fullpage-study-ready .section-study-grid > * { grid-column:1 / -1; }
}

/* Contact text shares the rail-label edge; icons hang to the left. */
.fullpage-study .portfolio-contact{top:auto;right:auto;bottom:var(--space-inset);left:calc((100vw - var(--grid-width))/2 + var(--space-tight) - var(--space-inline) - var(--space-disclosure))}
.fullpage-study .portfolio-contact .inline-brand{gap:var(--space-disclosure);margin-inline:0}
.fullpage-study .collection .project-grid{padding-inline:0}
/* Gallery uses the existing rail grid: 6 + 4 desktop, 4 + 2 tablet, stacked mobile. */
@media(max-width:600px),(max-height:600px){
 .fullpage-study .portfolio-contact{left:var(--space-inset);background:var(--color-page)}
 .fullpage-study-ready .section-study-grid{padding-bottom:calc(var(--space-section) + var(--space-section-mobile))}
}
.fullpage-study-ready .collection-rail nav{position:relative;z-index:3}
.fullpage-study-ready .collection-rail nav a{isolation:isolate;display:flex;align-items:center;height:var(--size-navigation-row);min-height:var(--size-navigation-row);color:var(--color-section-heading);font:var(--weight-body) var(--text-body)/var(--leading-navigation) var(--font-grotesk);font-variation-settings:"STYL" 0,"wght" calc(var(--weight-body) + 20);font-synthesis:none}
@media(hover:hover){.fullpage-study-ready .collection-rail nav a:hover{font-variation-settings:"STYL" 0,"wght" var(--weight-emphasis)}}
.fullpage-study-ready .collection-rail nav a:focus-visible{font-variation-settings:"STYL" 0,"wght" var(--weight-emphasis)}
.fullpage-study-ready .collection-rail nav a::after{content:"";position:absolute;inset:var(--space-small) 0;z-index:-1;border-radius:var(--radius-navigation);background:linear-gradient(to right,var(--color-navigation-wash-start),var(--color-navigation-wash-end));opacity:0}
.fullpage-study-ready .collection-rail nav a:is([aria-current],:hover,:focus-visible)::after{opacity:1}
.rail-material{position:fixed;pointer-events:none;z-index:2;overflow:visible;color:var(--color-navigation-amber)}
.rail-material path{fill:currentColor}
@media(max-width:600px),(max-height:600px){
 .fullpage-study .rail-material{display:none}
}



/* Work opens beside the portrait; the selected rail remains a quiet index. */
.fullpage-study .work-introduction{margin-bottom:calc(var(--space-section) + var(--space-disclosure))}
.fullpage-study .non-work-introduction{margin-bottom:calc(var(--space-group) + var(--space-disclosure));width:calc(var(--grid-track)*7 + var(--grid-gutter)*6);max-width:100%}
.fullpage-study .employer{row-gap:var(--space-inset)}
.fullpage-study .employer-rail{padding-bottom:var(--space-tight);border-bottom:0;position:relative}
.fullpage-study .employer-rail::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(to right,var(--color-rule) 40.385%,transparent)}
.fullpage-study .employer-wordmark-personio{width:70px}
.fullpage-study .employer-wordmark-personio img{width:85.977px;height:38.508px;object-fit:cover;left:-9.06px;top:-7.44px;opacity:.8}
.fullpage-study .employer-intro:has(.employer-wordmark-personio) .remit{letter-spacing:-.015625em}

/* Original artwork orange is shared by the poster, live canvas and fallback. */
[data-initial-rim-drained] .fullpage-study [data-glass-greeting]:not([data-rim-drain]) .glass-greeting-head{filter:grayscale(1)}

/* Server-rendered panels retain their final geometry before enhancement. */
[data-initial-section="projects"] .fullpage-study > main{transform:translate3d(0,calc(-1 * var(--section-viewport,100svh)),0)}
[data-initial-section="play"] .fullpage-study > main{transform:translate3d(0,calc(-2 * var(--section-viewport,100svh)),0)}
.fullpage-study .section-study-panel [data-reveal],.fullpage-study #about .section-study-title,.fullpage-study #about .reading>p{animation:none}
.fullpage-study .section-reveal-ready [data-section-reveal]:not(.reveal-visible){opacity:0}
@media(prefers-reduced-motion:reduce){.fullpage-study .section-reveal-ready [data-section-reveal]{opacity:1}}

/* Hold the initial panel until the shared reveal owner is ready. */
[data-initial-section="intro"] .fullpage-study #about:not(.section-reveal-ready) :is(.section-study-title,.reading>p),
[data-initial-section="projects"] .fullpage-study #work:not(.section-reveal-ready) [data-reveal],
[data-initial-section="play"] .fullpage-study #non-work:not(.section-reveal-ready) [data-reveal]{opacity:0}
@media(prefers-reduced-motion:reduce){
 .fullpage-study-ready{scroll-behavior:auto}
 [data-initial-section] .fullpage-study :is(#about,#work,#non-work):not(.section-reveal-ready) :is([data-reveal],.section-study-title,.reading>p){opacity:1}
}

/* First-load shell joins the introduction; no layout or pointer/input lock. */
@media(prefers-reduced-motion:no-preference){
 [data-initial-section="intro"] .fullpage-study:not([data-intro-entrance-ready]) :is(.grain-greeting-heading,.collection-rail nav,.portfolio-contact,.mobile-contact){opacity:0}
}

/* Original handwriting artwork, framed to its ink bounds. */

/* Mobile contact belongs to the introduction; the return control stays quiet while reading. */
.mobile-contact,.mobile-back-top{display:none}
@media(max-width:600px),(max-height:600px){
 .fullpage-study .portfolio-contact{display:none}
 .fullpage-study-ready [data-anchor="intro"] .section-study-grid{padding-top:var(--space-inset)}
 .fullpage-study #about{position:relative;padding-top:calc(var(--space-section-mobile) + var(--space-inset) + var(--space-inline))}
 .mobile-contact{display:flex;position:absolute;top:0;right:0;justify-content:flex-end;gap:0;margin:0}
 .mobile-contact a{display:flex;align-items:center;justify-content:center;width:var(--size-control);height:var(--size-control);color:var(--color-muted);border-radius:var(--radius-navigation);-webkit-tap-highlight-color:var(--color-rule)}
 /* Both glyphs fill 18 of their 24 viewBox units; scale the box so the
    drawn icon (not its padding) is 16px. */
 .mobile-contact a:active{background:var(--color-rule);color:var(--color-active)}
 .mobile-contact a:focus-visible{outline:2px solid var(--color-focus);outline-offset:var(--space-small)}
 .mobile-contact svg{width:calc(var(--size-icon) * 24 / 18);height:calc(var(--size-icon) * 24 / 18)}
 .mobile-back-top:not([hidden]){display:flex;align-items:center;justify-content:center;position:fixed;z-index:3;right:var(--page-gutter-mobile);bottom:max(var(--page-gutter-mobile),env(safe-area-inset-bottom));width:var(--size-control-large);height:var(--size-control-large);padding:var(--space-inline);border:0;border-radius:var(--radius-round);background:var(--color-page);color:var(--color-muted);box-shadow:var(--shadow-card-hover);cursor:pointer}
 .mobile-back-top svg{width:100%;height:100%}
 .mobile-back-top:focus-visible{outline:2px solid var(--color-focus);outline-offset:var(--space-small)}
}

/* The actual next title previews its own section, rather than a clipped copy. */
@media(max-width:600px),(max-height:600px){
 .section-study-panel[data-mobile-peek] .collection-content{visibility:hidden}
 .section-study-panel[data-mobile-peek] :is(.work-introduction,.non-work-introduction){visibility:hidden!important}
 .section-study-panel[data-mobile-peek] .section-study-title{visibility:visible}
 .section-study-panel[data-mobile-peek] .work-overview{opacity:1!important;transform:none!important;filter:none!important}
 .section-study-panel[data-mobile-peek] .section-study-title{opacity:.3!important;transform:none!important;filter:none!important}
}


.intro-mobile-opening{display:none}
@media(max-width:600px),(max-height:600px){
 .fullpage-study #about > .section-study-title,.fullpage-study .intro-desktop-opening{display:none}
 .fullpage-study .intro-mobile-opening{display:inline}
 .fullpage-study #about .reading{padding-top:0}
}

/* A mobile visit is one document, including after rotating the device. */
html.mobile-native-scroll{overflow:auto;height:auto;scroll-behavior:auto;scroll-snap-type:none}
.mobile-native-scroll body{overflow:visible;height:auto;overscroll-behavior:auto}
.mobile-native-scroll .fullpage-study>main{position:static;inset:auto;height:auto;transform:none!important;will-change:auto}
/* Only the opening fills the screen: the next grid's 48px top padding
   leaves a 24px glimpse of Work. Content can grow beyond this minimum;
   the two grids retain their normal section padding as the minimum gap. */
.mobile-native-scroll .section-study-panel{height:auto;min-height:0;transform:none!important}
.mobile-native-scroll .section-study-panel:first-child{min-height:calc(100svh - var(--space-section-mobile) - var(--space-inset))}
.mobile-native-scroll .section-study-panel:last-child{min-height:100svh}
.mobile-native-scroll .section-study-overflow{height:auto;overflow:visible;overscroll-behavior:auto}
.mobile-native-scroll .section-study-grid{min-height:0;max-width:var(--width-reading);padding-block:calc(var(--space-section-mobile) + var(--space-group)) var(--space-section-mobile);}
.mobile-native-scroll .section-study-grid>*{grid-column:1 / -1}
.mobile-native-scroll .section-study-panel:first-child .section-study-grid{padding-top:var(--space-inset)}
.mobile-native-scroll .section-study-panel:last-child .section-study-grid{padding-bottom:var(--space-section-mobile)}
.mobile-native-scroll .collection-rail,.mobile-native-scroll .rail-material,.mobile-native-scroll .portfolio-contact{display:none}

/* Failed enhancement leaves the original document readable and navigable. */
html.portfolio-startup-failed,html.portfolio-startup-failed body{height:auto!important;overflow:auto!important}
html.portfolio-startup-failed .fullpage-study>main{position:static!important;height:auto!important;transform:none!important;will-change:auto}
html.portfolio-startup-failed .section-study-panel,html.portfolio-startup-failed .section-study-overflow{height:auto!important;overflow:visible!important;transform:none!important}
html.portfolio-startup-failed .section-study-panel{min-height:0!important}
html.portfolio-startup-failed :is([data-reveal],[data-section-reveal],.section-study-title,.reading>p,.grain-greeting-heading,.collection-rail nav,.portfolio-contact,.mobile-contact){opacity:1!important;visibility:visible!important;animation:none!important;transform:none!important;filter:none!important}
html.portfolio-startup-failed .collection-content{visibility:visible!important}
html.portfolio-startup-failed .rail-material{display:none}