:root{--paper:#e5dacd;--ink:#3e4436;--serif:"Vollkorn",Georgia,"Times New Roman",serif;--typewriter:"Courier New",Courier,monospace;--edge-x:clamp(24px,4.3vw,72px);--edge-bottom:clamp(34px,6.2vh,76px)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{background:var(--paper);color:var(--ink);font-family:var(--serif);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}.page{position:relative;width:100%;min-height:100vh;min-height:100svh;overflow:hidden}.mark{position:absolute;top:clamp(24px,3.1vh,30px);left:var(--edge-x);z-index:3;display:block;width:40px;height:40px}.mark img{display:block;width:100%;height:100%;object-fit:contain}
.theme-toggle{position:absolute;top:clamp(24px,3.1vh,30px);right:var(--edge-x);z-index:6;width:40px;height:40px;padding:0;border:0;background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:color .35s ease}
.theme-toggle .moon{display:block;font:30px/1 Georgia,"Times New Roman",serif;transform:translateY(-1px);user-select:none}
.theme-toggle:focus-visible{outline:1px solid currentColor;outline-offset:4px}
html.dark-background body{background:#000;color:var(--paper)}
html.dark-background .footer{color:var(--paper)}
html.dark-background .theme-toggle{color:var(--paper)}
html.dark-background .oval-clock{color:#000}
body{transition:background-color .45s ease,color .45s ease}
.hero{width:clamp(305px,max(32vw,43vh),545px);aspect-ratio:2/3;position:absolute;left:50%;top:44%;margin:0;transform:translate(-50%,-50%)}
.liquid-oval{position:absolute;inset:2.2% 7.5%;overflow:hidden;border-radius:50%;transform:rotate(18deg);box-shadow:0 7px 16px rgba(0,0,0,.08);isolation:isolate;background:transparent}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform:none;filter:none;opacity:1}
.lens-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.oval-clock{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:visible;color:var(--paper)}
.drawn-hand{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.drawn-hand .hand-stroke,.drawn-hand .hand-head{vector-effect:non-scaling-stroke}
/* Intentionally imperfect SVG paths: the bends and open V-shaped tips make the
   hands read like pen/pencil arrows, rather than a CSS line or dashed texture. */
.drawn-hour .hand-stroke,.drawn-hour .hand-head{stroke-width:4.6}
.drawn-minute .hand-stroke,.drawn-minute .hand-head{stroke-width:2.8}

.lens{position:absolute;left:0;top:0;overflow:hidden;will-change:transform;pointer-events:none;transform-origin:center;
  /* Broad asymmetric feather: fully invisible at the perimeter, with no hard
     geometric boundary. Multiple patches overlap so only pixel distortion reads. */
  -webkit-mask-image:radial-gradient(ellipse at var(--mx,47%) var(--my,53%),rgba(0,0,0,.88) 0%,rgba(0,0,0,.78) 12%,rgba(0,0,0,.60) 25%,rgba(0,0,0,.40) 39%,rgba(0,0,0,.23) 53%,rgba(0,0,0,.11) 66%,rgba(0,0,0,.04) 77%,rgba(0,0,0,.012) 87%,transparent 100%);
  mask-image:radial-gradient(ellipse at var(--mx,47%) var(--my,53%),rgba(0,0,0,.88) 0%,rgba(0,0,0,.78) 12%,rgba(0,0,0,.60) 25%,rgba(0,0,0,.40) 39%,rgba(0,0,0,.23) 53%,rgba(0,0,0,.11) 66%,rgba(0,0,0,.04) 77%,rgba(0,0,0,.012) 87%,transparent 100%);
  -webkit-mask-size:112% 112%;mask-size:112% 112%;
  -webkit-mask-position:center;mask-position:center;
}
.lens img{position:absolute;max-width:none;object-fit:cover;filter:none;opacity:1;will-change:transform}
.hero-name{position:absolute;left:70%;top:61%;transform:translate(-50%,-50%);z-index:5;color:#c3c8cc;font-family:var(--typewriter);font-size:17px;font-weight:400;line-height:1;white-space:nowrap;pointer-events:none;text-shadow:none}.footer{font-family:var(--serif);position:absolute;left:var(--edge-x);right:var(--edge-x);bottom:var(--edge-bottom);display:flex;align-items:flex-start;justify-content:space-between;font-size:15px;line-height:1.55}.footer-left p{margin:14px 0 0}.footer-nav{display:flex;gap:8px;align-items:center}.footer-nav a:hover{opacity:.58}.linkedin{font:700 17px/1 Arial,Helvetica,sans-serif;letter-spacing:-.08em}@media(max-width:800px){:root{--edge-x:24px;--edge-bottom:34px}.hero{width:clamp(250px,min(72vw,49vh),450px);top:43%}}@media(max-height:720px) and (min-width:801px){.hero{width:clamp(280px,45vh,435px);top:42%}}

/* v52 contextual footer panels: invisible on landing, mutually exclusive cross-fade. */
.info-panel{position:absolute;z-index:2;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);transition:opacity .42s ease,transform .42s ease,visibility 0s linear .42s;color:var(--ink);font:15px/1.55 var(--serif);overflow-wrap:anywhere}
.info-panel.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition:opacity .42s ease,transform .42s ease,visibility 0s}
.info-panel p{margin:0;white-space:pre-wrap}
.info-about .about-quote{font-family:"Vollkorn";color:#777C70}
.info-about .about-source{font-family:"Vollkorn";font-size:var(--about-source-size,1em);color: #777C70}
.info-about .about-body{font-family:var(--serif)}
.info-about .about-lab-name{font-family:var(--serif);font-weight:700}
.info-about{left:18%;top:22%;width:min(21.5vw,340px);min-width:220px;transform:translate(-50%,8px)}
.info-open{right:calc(var(--edge-x) + 42px);top:23%;width:min(22vw,340px);min-width:220px}
.info-about.is-visible{transform:translate(-50%,0)}

html.dark-background .info-panel{color:var(--paper)}
@media(max-width:800px){.info-about{left:var(--edge-x);top:19%;width:30vw;min-width:0;transform:translateY(8px)}.info-about.is-visible{transform:translateY(0)}.info-open{right:var(--edge-x);top:19%;width:30vw;min-width:0}}

/* Borderless About notes window, aligned with the open-position column. */
.about-roll{top:calc(44% + 24px);height:min(24vh,186px);overflow:hidden;transform:none;transition:none;pointer-events:none}
.about-roll.is-visible{transform:none;pointer-events:none}
.about-roll-track{will-change:transform}
.about-roll-row{line-height:1.55;padding-bottom:1.55em;white-space:pre-wrap}
@media(max-width:800px){.about-roll{top:calc(43% + 24px)}}
@media(max-height:720px) and (min-width:801px){.about-roll{top:calc(42% + 24px)}}
/* Freeze the landing geometry when selected text flows beneath it. */
.landing,.mobile-content{display:contents}
.page.use-scroll-layout .landing{display:block;position:relative;height:100vh;height:100svh}
.page.use-scroll-layout .mobile-content{display:none}
.page.use-scroll-layout.has-mobile-content .mobile-content{display:block;width:clamp(305px,max(32vw,43vh),545px);padding:24px 0 60px;max-width:calc(100% - 2 * var(--edge-x));margin:0 auto}
.page.use-scroll-layout .mobile-content .info-panel{display:none;position:static;inset:auto;width:100%;min-width:0;transform:none;transition:none}
.page.use-scroll-layout .mobile-content .info-panel.is-visible{display:block;transform:none}
.page.use-scroll-layout .mobile-content .about-roll{margin-top:3.1em;height:186px}
.page.use-scroll-layout.has-mobile-content .footer{position:static;inset:auto;margin:0 var(--edge-x);padding-bottom:var(--edge-bottom)}
.page.layout-probe{position:fixed;inset:0;width:100%;height:100svh;min-height:0;visibility:hidden!important;pointer-events:none;z-index:-1;contain:layout style}
.page.layout-probe .info-panel{visibility:hidden!important;opacity:0;transition:none}

/* Reserve the full paragraph before the first character is typed. */
.layout-reserve{display:none}
.page.use-scroll-layout .mobile-content .info-panel.is-visible:not(.about-roll){display:grid}
.page.use-scroll-layout .mobile-content .info-panel:not(.about-roll)>p{grid-area:1 / 1;align-self:start;min-width:0}
.page.use-scroll-layout .mobile-content .layout-reserve{display:block;visibility:hidden;pointer-events:none;user-select:none}

/* Replace the original landing footer with a hint only after expansion. */
.landing-scroll-hint{display:none;position:absolute;left:var(--edge-x);right:var(--edge-x);bottom:var(--edge-bottom);margin:0;font:15px/1.55 var(--serif);color:inherit}
.page.use-scroll-layout.has-mobile-content .landing-scroll-hint{display:block}

/* Expanded text shares the centered clock column at every breakpoint. */
@media(max-width:800px){.page.use-scroll-layout.has-mobile-content .mobile-content{width:clamp(250px,min(72vw,49vh),450px)}}
@media(max-height:720px) and (min-width:801px){.page.use-scroll-layout.has-mobile-content .mobile-content{width:clamp(280px,45vh,435px)}}

/* Landing columns may use the width needed for their fixed sentence lines. */
.page:not(.use-scroll-layout):not(.layout-probe) .info-about{width:var(--landing-about-width,min(21.5vw,340px))}
.page:not(.use-scroll-layout):not(.layout-probe) #openPanel{width:var(--landing-open-width,min(22vw,340px))}
/* Center the expanded text itself beneath the clock. */
.page.use-scroll-layout .mobile-content{text-align:center}

/* Only the expanded About body reads from the left edge of its column. */
.page.use-scroll-layout .info-about .about-copy{display:block;text-align:left}