@import url("/reading-room-tokens.css?v=dialog-close-340");
@font-face{font-family:"Timeless Serif";src:url("/fonts/timeless-serif-italic-variable.woff2") format("woff2");font-weight:200 700;font-style:italic;font-display:swap}
@font-face{font-family:"Timeless Sans";src:url("/fonts/timeless-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Timeless Sans";src:url("/fonts/timeless-sans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Timeless Sans";src:url("/fonts/timeless-sans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Timeless Sans Variable";src:url("/fonts/timeless-sans-variable.woff2") format("woff2");font-weight:300 800;font-style:normal;font-display:swap}
/* Reading-room foundations. Component artwork keeps its own visual vocabulary. */

*{box-sizing:border-box}html{background:var(--color-page);color:var(--color-body)}body{margin:0;-webkit-font-smoothing:antialiased}main{width:min(var(--width-reading),calc(100% - var(--space-inset)*2));margin:var(--page-top) auto 0;padding-bottom:var(--space-section)}.reading{width:100%;max-width:none}p{margin:0 0 var(--space-paragraph)}a{color:var(--color-active);text-decoration-color:var(--color-link-rule);text-underline-offset:4px;text-decoration-thickness:1px}a:hover{text-decoration-color:currentColor}a:focus-visible{outline:2px solid var(--color-focus);outline-offset:5px}h2,h3{color:var(--color-active);font-weight:var(--weight-emphasis);font-size:var(--text-body);line-height:var(--leading-body);margin:0}h3{margin-bottom:var(--space-small)}.lead{color:var(--color-heading);font-weight:var(--weight-body)}.grain-greeting{--heading:var(--hey-size,64px);position:relative;align-self:start;height:172px;min-height:0}.grain-greeting-heading{position:relative;height:100%}.grain-greeting [data-grain-hint]{display:none}.introduction{margin-bottom:var(--space-section)}.employer{margin-bottom:var(--space-section)}.employer-heading{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-inline);width:100%;max-width:none}.remit{font:inherit;color:var(--color-muted);margin:var(--space-small) 0 var(--space-group)}article{margin-bottom:var(--space-sheet-top)}figure{margin:var(--space-inset) 0 0}figure>img{display:block;width:100%;height:auto;border-radius:var(--radius-artifact)}.employer-intro{margin-bottom:var(--space-group)}.employer-intro .remit{margin-bottom:0}
.collection{position:relative}.collection-content{padding:var(--space-inline) 0 var(--space-inset)}.collection-content>.employer:last-child{margin-bottom:0}
/* Rendered artwork with an independently grounded shadow and jelly deformation. */
.glass-greeting-button{transform:translateX(-15%);display:block;position:relative;width:min(100%,172px);height:auto;aspect-ratio:1;padding:0;border:0;background:none;color:inherit;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.glass-greeting-button:focus-visible{outline:2px solid var(--color-focus);outline-offset:var(--space-small);border-radius:var(--radius-artifact)}
.greeting-colour-defs{position:absolute;pointer-events:none}
.glass-greeting-head{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.grain-greeting .glass-greeting-canvas{position:absolute;inset:-50%;width:200%;height:200%;display:block;visibility:hidden;pointer-events:none;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.glass-greeting-head{transform:translateY(-12px) scaleX(-1);clip-path:inset(0 0 13% 0)}
.glass-greeting-shadow{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;clip-path:inset(87% 0 0);transform:scaleX(-1) scale(.8);transform-origin:50% 90%;opacity:.8}
.grain-greeting .glass-greeting-canvas{transform:scaleX(-1)}
.glass-greeting-button[data-ready] .glass-greeting-canvas{visibility:visible}
.glass-greeting-button[data-ready] .glass-greeting-head,.glass-greeting-button[data-ready] .glass-greeting-shadow{visibility:hidden}
/* Shared entrance keyframes (also used by project dialogs). */
@keyframes reading-arrive{from{opacity:0;filter:blur(var(--enter-blur));transform:translateY(var(--enter-distance))}to{opacity:1;filter:blur(0);transform:translateY(0)}}

@media(max-width:600px),(max-height:600px){main{width:calc(100% - var(--page-gutter-mobile)*2);margin-top:var(--page-top)}.grain-greeting{--heading:var(--hey-mobile-size,60px);height:172px;min-height:0}.introduction{margin-bottom:var(--space-section-mobile)}article{margin-bottom:var(--space-group)}.employer{margin-bottom:var(--space-section-mobile)}}

.grain-greeting[data-grain-slant] [data-grain-fallback]{font-style:italic;filter:blur(1.3px)}

.grain-greeting[data-grain-font="sans"] [data-grain-fallback]{font-family:var(--font-body);font-weight:var(--weight-emphasis);font-style:normal;letter-spacing:var(--hey-tracking,0em);filter:blur(.8px)}

/* Introduction spacing from Figma 391:72. */
.introduction .reading{display:flex;flex-direction:column;gap:var(--space-paragraph);padding-top:var(--space-group)}
.introduction .reading>p{margin:0}


.portfolio-page{display:flex;flex-direction:column;min-height:100svh}
.portfolio-page>main{flex-shrink:0}
/* Persistent contacts use the requested 24px viewport inset. */
.portfolio-contact{position:fixed;top:var(--space-inset);right:var(--space-inset);z-index:3;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-inline);background:none}
.portfolio-contact a{display:inline-flex;align-items:center}
.portfolio-contact .contact-instagram{gap:var(--space-disclosure);text-decoration:none}
.portfolio-contact .contact-instagram>span{text-decoration:underline;text-decoration-color:var(--color-link-rule);text-underline-offset:4px;text-decoration-thickness:1px}

.portfolio-contact .contact-instagram>svg{width:16px;height:16px;flex:none}

.portfolio-contact .email-copy{margin-inline:0;padding:0;column-gap:var(--space-disclosure)}
.portfolio-page .portfolio-contact :is(a,.email-copy){font-weight:var(--weight-body);color:var(--color-muted);transition:color var(--motion-feedback) var(--ease-enter)}
.portfolio-page .portfolio-contact :is(a,.email-copy):hover{color:var(--color-active)}
.portfolio-contact .email-copy:hover .email-copy-label{text-decoration-color:var(--color-link-rule)}
@media(max-width:600px),(max-height:600px){.portfolio-contact{flex-direction:row;gap:var(--space-inset)}}



.portfolio-page a{font-weight:var(--weight-emphasis)}
.inline-external{display:inline-flex;align-items:baseline;gap:2px;white-space:nowrap;text-decoration:none}
.inline-external span{text-decoration:underline;text-decoration-color:var(--color-link-rule);text-underline-offset:4px;text-decoration-thickness:1px}
.inline-external:hover span{text-decoration-color:currentColor}
/* Hover previews the copy action; successful activation confirms in place. */
.email-copy{display:inline-grid;text-align:start;grid-template-columns:auto auto;column-gap:3px;vertical-align:baseline;align-items:baseline;position:relative;border:0;padding:0;background:none;color:var(--color-active);font:inherit;font-weight:var(--weight-emphasis);cursor:pointer;white-space:nowrap}
.email-copy:focus-visible{outline:2px solid var(--color-focus);outline-offset:5px}
.email-copy-icon{grid-area:1/1;display:inline-grid;align-self:baseline}
.email-copy-icon .inline-mark{grid-area:1/1;translate:0 0;transition:opacity var(--motion-feedback) var(--ease-enter),translate var(--motion-feedback) var(--ease-enter)}
.email-copy-icon .copy-mark{opacity:0;translate:0 var(--enter-distance)}
.email-copy:focus-visible .mail-mark,.email-copy[data-copied] .mail-mark{opacity:0;translate:0 calc(-1 * var(--enter-distance))}
.email-copy:focus-visible .copy-mark,.email-copy[data-copied] .copy-mark{opacity:1;translate:0 0}
@media(hover:hover){.email-copy:hover .mail-mark{opacity:0;translate:0 calc(-1 * var(--enter-distance))}.email-copy:hover .copy-mark{opacity:1;translate:0 0}}


.email-copy-rest,.email-copy-success{grid-area:1/2;transition:opacity var(--motion-feedback) var(--ease-enter),transform var(--motion-feedback) var(--ease-enter)}
.email-copy-rest,.email-copy-success{display:block}
.email-copy-label{text-decoration:underline;text-decoration-color:var(--color-link-rule);text-underline-offset:4px;text-decoration-thickness:1px}
.email-copy:hover .email-copy-label{text-decoration-color:currentColor}
.email-copy-success{justify-self:start;opacity:0;transform:translateY(var(--enter-distance));pointer-events:none}
.email-copy[data-copied] .email-copy-rest{opacity:0;transform:translateY(calc(-1 * var(--enter-distance)))}
.email-copy[data-copied] .email-copy-success{opacity:1;transform:translateY(0)}
.email-copy-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.email-copy-error:not([hidden]){display:block;margin-top:var(--space-disclosure)}
@media(prefers-reduced-motion:reduce){.email-copy-rest,.email-copy-success,.email-copy-icon .inline-mark{transition:none;translate:none}.email-copy-rest,.email-copy-success{transform:none!important}}





/* Optical logo geometry is artwork, not a typography scale. */
.inline-brand{gap:3px;margin-inline-start:.22em}
.inline-brand .inline-mark{display:inline-block;flex:none}

/* Collections beside the rail. */

.portfolio-page .introduction{margin-bottom:calc(var(--space-group) + var(--space-inset))}
.portfolio-page #work .collection-content{margin-left:0;width:100%;padding-top:0;padding-bottom:var(--space-section)}
.portfolio-page .employer-intro{margin:0;display:flex;align-items:center;gap:var(--space-disclosure)}
.portfolio-page .employer-intro .employer-heading{width:auto;flex:none}
.portfolio-page .employer-intro .remit{display:flex;align-items:center;gap:var(--space-disclosure);width:auto;white-space:nowrap}

/* Shared page grid. Nested editorial blocks use the same tracks and edges. */
.portfolio-page>main{display:grid;grid-template-columns:repeat(var(--grid-columns),minmax(0,1fr));column-gap:var(--grid-gutter);width:var(--grid-width);max-width:none;margin-inline:auto}
.portfolio-page>main>*{grid-column:1/-1;min-width:0}
.portfolio-page .reading{width:var(--grid-reading-width);max-width:100%}
.portfolio-page .introduction .lead{color:inherit}
/* Work artwork spans the page grid; editorial copy retains eight tracks. */
.portfolio-page .employer{display:grid;grid-template-columns:repeat(var(--grid-columns),minmax(0,1fr));column-gap:var(--grid-gutter);row-gap:var(--space-inset)}
.portfolio-page .employer-projects{display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--space-section)}
.portfolio-page .employer:first-of-type .employer-projects{row-gap:calc(var(--space-group) + var(--space-inset))}
.portfolio-page .employer-projects article{display:flex;flex-direction:column;gap:var(--space-inset);margin:0}
.portfolio-page .employer:first-of-type article{gap:var(--space-inline)}
.portfolio-page .employer-projects p,.portfolio-page .employer-projects figure,.portfolio-page .employer-intro .remit{margin:0}
/* Original Figma wordmarks, including their optical crop and reserved space. */
.employer-wordmark{position:relative;overflow:hidden}
.employer-wordmark-personio{width:88px;height:var(--space-inset)}
.employer-wordmark-personio img{position:absolute;width:110.23%;height:auto;max-width:none;left:-11.15%;top:calc(-1 * var(--space-tight))}
.employer-wordmark-google{width:75.6323px;height:var(--space-inset)}
.employer-wordmark-google img{display:block}
.portfolio-page .work-introduction{width:calc(var(--grid-track)*8 + var(--grid-gutter)*7);max-width:100%;margin:0 0 calc(var(--space-group) + var(--space-inset))}
.portfolio-page .employer-rail{grid-column:1 / span 8;min-width:0}
.portfolio-page .employer-projects{grid-column:1/-1;min-width:0}
.portfolio-page .employer .reading{width:calc(var(--grid-track)*8 + var(--grid-gutter)*7);max-width:100%}
@media(max-width:600px),(max-height:600px){.portfolio-page .employer .reading{width:100%}.portfolio-page .employer-rail,.portfolio-page .employer-projects{grid-column:1/-1}.portfolio-page .employer{margin-bottom:var(--space-section)}}
.portfolio-page .collection figure,.portfolio-page .collection .project-grid{width:100%;max-width:none;margin-left:0}

/* Align the visible marks to the letters, rather than the line-height box. */
.inline-brand .inline-mark{align-self:baseline}
.inline-brand .mail-mark,.inline-brand .copy-mark{width:16px;height:16px;transform:translateY(3px)}


.glass-greeting-button[data-dragging]{cursor:grabbing}

/* Reveal complete artwork surfaces, never isolated borders or partial images. */
.artwork-loading [data-artwork-pending]{visibility:hidden}

/* A direct Not work load starts on its settled look while clips decode. */
.glass-greeting-fancy-poster{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:translateY(-12px) scaleX(-1);pointer-events:none}
[data-initial-section="play"]:not(.mobile-native-scroll) .glass-greeting-fancy-poster{display:block}
[data-initial-section="play"]:not(.mobile-native-scroll) .glass-greeting-head{visibility:hidden}
.glass-greeting-button[data-ready] .glass-greeting-fancy-poster{visibility:hidden}

/* Keep the existing portrait hit area despite the larger transparent flight canvas. */
.glass-greeting-button::after{content:"";position:absolute;inset:-25%;touch-action:none}

/* Original artwork keeps its geometry while delivery is pending. No timer or replacement animation. */
.artwork-status{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-disclosure);padding:var(--space-inset);background:var(--color-placeholder);color:var(--color-muted);font:var(--weight-body) var(--text-caption)/var(--leading-body) var(--font-body);text-align:center}
.artwork-status[hidden]{display:none}
.artwork-status button{font:inherit;color:var(--color-active);background:var(--color-surface);border:1px solid var(--color-rule);border-radius:var(--radius-artifact);padding:var(--space-disclosure) var(--space-tight);cursor:pointer}
.artwork-status button[hidden]{display:none}

.artwork-image-content{display:contents}