/* Hallmark · genre: editorial · macrostructure: Narrative Workflow · theme: custom cornflower/cream · enrichment: full-page interactive water + user-provided motion clips · navigation: N3 right scroll rail · footer: Ft1 mast-headed · pre-emit critique: P5 H5 E5 S5 R5 V4 */
@import url("tokens.css?v=cornflower-palette-v5");
* { box-sizing: border-box; }
html { background: var(--color-paper); overflow-x: clip; scrollbar-width: none; -ms-overflow-style: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
html.project-dialog-open,
html.project-dialog-open body { overflow: hidden; }
body { margin: 0; overflow-x: clip; color: var(--color-ink); background: var(--color-paper); font-family: var(--font-body); }
html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar { display: none; width: 0; height: 0; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.video-hero { position: relative; min-height: 100dvh; overflow: hidden; isolation: isolate; color: var(--color-contrast); }
.video-placeholder { position: absolute; inset: 0; z-index: -2; background: var(--color-hero); }
.bubble-stage { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.bubble-stage canvas { position: absolute; width: 100%; height: 100%; }
.video-hero::after { display: none; }
.hero-mark, .small-wordmark { position: absolute; z-index: 10001; top: clamp(1.5rem, 4vw, 3rem); left: clamp(1.5rem, 4vw, 3rem); width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 50%; background: var(--color-light); color: var(--color-hero); font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; letter-spacing: -0.1em; }
.hero-mark > span, .small-wordmark > span { display: block; transform: translate(-0.025em, -0.06em); }
.hero-mark { position: absolute; width: 3.15rem; height: 3.15rem; font-size: 1.6rem; }
.small-wordmark { width: 3.15rem; height: 3.15rem; font-size: 1.6rem; }
.hero-mark, .small-wordmark, .site-menu { position: absolute !important; }
.side-shell { position: absolute; inset: 0 0 auto; z-index: 10000; height: 0; pointer-events: none; }
.side-shell .small-wordmark, .side-shell .site-menu { pointer-events: auto; }
.hero-mark { background: var(--color-light); color: var(--color-hero); }
.small-wordmark { background: var(--color-ink); color: var(--color-paper); }
.hero-content { position: relative; z-index: 2; min-height: 100dvh; padding: var(--space-6) 9vw; display: grid; place-items: center; align-content: center; text-align: center; pointer-events: none; }
.eyebrow { margin: 0; font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.5; letter-spacing: 0.04em; text-transform: uppercase; }
.page-intro > .eyebrow, .contact-panel > .eyebrow { font-size: clamp(1rem, 1.6vw, 1.3rem); font-weight: 700; letter-spacing: 0.06em; }
.eyebrow--light { color: var(--color-contrast); }
.video-hero h1 { margin: 0; color: var(--color-light); font-family: var(--font-display); font-size: clamp(4rem, 12vw, 12.5rem); font-weight: 400; line-height: 0.82; letter-spacing: -0.075em; text-transform: none; white-space: nowrap; filter: drop-shadow(0 0.22rem 0.45rem rgba(0, 0, 0, 0.2)); }
.hero-role { margin: var(--space-3) 0 0; color: var(--color-light); font-size: clamp(1.15rem, 3vw, 2.7rem); font-weight: 600; letter-spacing: -0.045em; filter: drop-shadow(0 0.18rem 0.36rem rgba(0, 0, 0, 0.13)); }
.hero-credit { position: absolute; z-index: 2; right: clamp(1.5rem, 4vw, 3rem); bottom: clamp(1.5rem, 4vw, 3rem); margin: 0; display: flex; gap: var(--space-1); color: var(--color-light); font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.03em; text-transform: uppercase; pointer-events: none; }
.site-menu { position: absolute; z-index: 10002; top: clamp(1.5rem, 4vw, 3rem); right: clamp(1.5rem, 4vw, 3rem); }
.site-menu summary { width: 2.65rem; cursor: pointer; list-style: none; display: grid; gap: 0.52rem; padding: 0.35rem 0; }
.site-menu summary::-webkit-details-marker { display: none; }
.site-menu summary span { display: block; width: 2.65rem; height: 2px; background: var(--color-ink); transition: transform 180ms var(--ease-out), opacity 180ms var(--ease-out); }
.site-menu--light summary span { background: var(--color-light); }
.site-menu[open] summary span:nth-child(1) { transform: translateY(0.33rem) rotate(45deg); }.site-menu[open] summary span:nth-child(2) { transform: translateY(-0.33rem) rotate(-45deg); }
 .site-menu nav { position: absolute; top: calc(100% + var(--space-2)); right: 0; min-width: 11rem; padding: var(--space-2); display: grid; gap: var(--space-1); background: color-mix(in srgb, var(--color-hero) 88%, var(--color-light)); color: var(--color-paper); border: 1px solid color-mix(in srgb, var(--color-paper) 56%, transparent); backdrop-filter: blur(20px) saturate(125%); -webkit-backdrop-filter: blur(20px) saturate(125%); font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.055em; text-transform: uppercase; text-shadow: 0 1px 0 color-mix(in srgb, var(--color-ink) 25%, transparent); box-shadow: 0 1rem 3rem color-mix(in srgb, var(--color-ink) 22%, transparent); }
.site-menu[open] nav { animation: menu-drop 190ms var(--ease-out) both; }
 .site-menu nav a { padding: 0.55rem; }.site-menu nav a:hover, .site-menu nav a.is-active { background: color-mix(in srgb, var(--color-light) 18%, transparent); }
@keyframes menu-drop { from { opacity: 0; transform: translateY(-0.65rem); } to { opacity: 1; transform: translateY(0); } }
.subpage { padding-right: 0; }
.page-intro, .contact-panel { min-height: 72vh; padding: clamp(8rem, 15vh, 12rem) clamp(1.5rem, 8vw, 9rem) var(--space-6); display: flex; flex-direction: column; justify-content: space-between; }
.page-intro--pink { background: var(--color-paper-deep); }
.page-intro--blue { background: var(--color-accent-2); }
.page-intro--pink, .page-intro--blue, .work-card--blue, .work-card--pink { color: var(--color-accent); }
.page-intro--pink h1, .page-intro--blue h1, .page-intro--pink .intro-copy, .page-intro--blue .intro-copy, .work-card--blue h2, .work-card--pink h2, .work-card--blue p:not(.eyebrow), .work-card--pink p:not(.eyebrow) { color: var(--color-accent); }
.page-intro h1, .contact-panel h1 { max-width: 10ch; color: var(--color-ink); font-family: var(--font-display); font-size: clamp(4rem, 9vw, 9rem); font-weight: 400; line-height: 0.86; letter-spacing: -0.07em; }
.intro-copy { max-width: 34rem; margin: var(--space-5) 0 0; color: var(--color-ink-soft); font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.6; }
.work-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.work-card { min-height: 26rem; padding: clamp(1.5rem, 4vw, 4rem); display: flex; flex-direction: column; justify-content: space-between; border-top: 1px solid var(--color-rule); }
.work-card--blue { background: var(--color-accent-2); }.work-card--yellow { background: var(--color-paper-soft); }.work-card--pink { background: var(--color-paper-deep); }
.work-card h2, .approach-step h2 { margin: var(--space-6) 0 var(--space-3); font-family: var(--font-display); font-size: clamp(2.3rem, 4vw, 4.6rem); font-weight: 600; line-height: 0.9; letter-spacing: -0.065em; }
.work-card p:not(.eyebrow), .approach-step p { max-width: 25rem; margin: 0; color: var(--color-ink-soft); line-height: 1.65; }
.intro-copy, .work-card p:not(.eyebrow), .approach-step p { font-family: var(--font-mono); font-size: clamp(0.98rem, 1.35vw, 1.16rem); font-weight: 700; line-height: 1.65; }
.approach-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--color-paper); }
.approach-step { min-height: 31rem; padding: clamp(1.5rem, 4vw, 4rem); border-top: 1px solid var(--color-rule); border-right: 1px solid var(--color-rule); display: flex; flex-direction: column; justify-content: space-between; }
.approach-step span { font-family: var(--font-mono); font-size: 0.7rem; }
.contact-page { min-height: 100dvh; padding: 0; background: var(--color-paper-soft); }.contact-panel { min-height: 100dvh; justify-content: flex-start; }.contact-panel h1 { max-width: 8ch; }.contact-panel .intro-copy { margin-top: var(--space-3); }.contact-panel .email-link { margin-top: 4rem; }
.email-link { align-self: flex-start; margin-top: var(--space-5); border-bottom: 1px solid currentColor; font-family: var(--font-display); font-size: clamp(1.45rem, 3vw, 3.5rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.05em; }.contact-location { margin: auto 0 0; font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; }
.site-footer { padding: var(--space-3) clamp(1.5rem, 8vw, 9rem); display: flex; gap: var(--space-3); justify-content: space-between; color: var(--color-ink-soft); background: var(--color-paper); font-family: var(--font-mono); font-size: 0.74rem; text-transform: uppercase; }.site-footer a:hover { color: var(--color-ink); }
.page--approach { background: var(--color-hero); color: var(--color-paper); }
.page--approach .page-intro--blue, .page--approach .approach-grid, .page--approach .site-footer { background: var(--color-hero); }
.page--approach .page-intro h1, .page--approach .page-intro .intro-copy, .page--approach .approach-step, .page--approach .approach-step p, .page--approach .site-footer { color: var(--color-paper); }
.page--approach .approach-step { border-color: var(--color-paper); }
.page--approach .small-wordmark { background: var(--color-contrast); color: var(--color-hero); }
.page--approach .site-menu summary span { background: var(--color-paper); }
.page--approach .site-menu nav { color: var(--color-light); }
.page--approach .contact-page, .page--approach .contact-panel { background: var(--color-hero); }
.page--approach .contact-panel h1, .page--approach .contact-panel .intro-copy, .page--approach .contact-panel .email-link { color: var(--color-paper); }
html:has(body.page--work) { background: var(--color-hero); }
.page--work, .page--work .subpage, .page--work .site-footer { background: var(--color-hero) !important; }
.page--work { min-height: 100dvh; color: var(--color-paper); }
.page--work .page-intro--pink { background: var(--color-hero) !important; }
.page--work .page-intro h1, .page--work .page-intro .intro-copy, .page--work .site-footer { color: var(--color-paper); }
.page--work .small-wordmark { background: var(--color-contrast); color: var(--color-hero); }
.page--work .site-menu summary span { background: var(--color-paper); }
.work-canvas { position: relative; isolation: isolate; min-height: max(60rem, 124dvh); padding: clamp(7rem, 12vw, 10rem) clamp(1.5rem, 7vw, 8rem) var(--space-7); }
.work-canvas--scroll { min-height: 100dvh; overflow: hidden; }.work-canvas__copy { position: absolute; z-index: 2; top: clamp(7rem, 16vh, 10rem); left: 50%; width: min(38rem, calc(100% - 3rem)); display: grid; justify-items: center; transform: translateX(-50%); text-align: center; pointer-events: none; }
 .work-canvas__copy p, .work-canvas__copy > span { margin: 0; color: var(--color-secondary); font-family: var(--font-mono); font-size: clamp(0.72rem, 0.9vw, 0.85rem); font-weight: 700; letter-spacing: 0.045em; text-transform: uppercase; }
.work-canvas__copy > span { margin-top: var(--space-3); max-width: 22rem; line-height: 1.55; text-transform: none; }
.work-canvas__copy h1 { margin: var(--space-3) 0 0; color: var(--color-paper); font-family: var(--font-display); font-size: clamp(4.1rem, 8vw, 8.75rem); font-weight: 400; line-height: 0.8; letter-spacing: -0.075em; }
.work-piece { position: absolute; z-index: 1; width: clamp(8.2rem, 13vw, 14.5rem); aspect-ratio: 9 / 16; padding: 0; overflow: hidden; border: 1px solid var(--color-paper); border-radius: var(--radius-sm); background: var(--color-hero); color: var(--color-light); box-shadow: 0 0.8rem 1.8rem color-mix(in srgb, var(--color-paper) 15%, transparent); cursor: pointer; transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.work-piece--fleurie { top: 50%; right: clamp(3rem, 13vw, 14rem); left: auto; width: clamp(11.5rem, 16vw, 17rem); aspect-ratio: 4 / 5; border: 0; transform: translateY(-50%); }.work-piece--fleurie:hover, .work-piece--fleurie:focus-visible { transform: translateY(-50%); }.work-piece--fleurie > img, .work-piece--fleurie:hover > img, .work-piece--fleurie:focus-visible > img { transform: scale(1.07); }
.work-piece > img, .work-piece > video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-long) var(--ease-out); }
.work-piece--clip-five > video { transform: scale(1.06); }.work-piece--clip-five:hover > video, .work-piece--clip-five:focus-visible > video { transform: scale(1.085); }
 .work-scroll-container { position: absolute; z-index: 1; right: clamp(1.5rem, 6vw, 7rem); bottom: var(--space-5); left: clamp(1.5rem, 6vw, 7rem); height: min(42dvh, 27rem); overflow: hidden; overscroll-behavior: contain; cursor: grab; touch-action: pan-x; }.work-scroll-container::before, .work-scroll-container::after { position: absolute; z-index: 2; top: 0; bottom: 0; width: var(--space-3); content: ""; pointer-events: none; }.work-scroll-container::before { left: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--color-hero) 72%, transparent), transparent); }.work-scroll-container::after { right: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-hero) 72%, transparent)); }.work-scroll-container.is-dragging { cursor: grabbing; }.work-scroll-strip { display: flex; width: max-content; height: 100%; padding: var(--space-3) 0; will-change: transform; }.work-scroll-card { position: relative; flex: 0 0 auto; width: auto; height: 100%; aspect-ratio: 9 / 16; margin: 0 var(--space-2) 0 0; padding: 0; overflow: hidden; border: 0; border-radius: var(--radius-sm); background: var(--color-hero); color: var(--color-light); box-shadow: 0 0.8rem 1.8rem color-mix(in srgb, var(--color-paper) 15%, transparent); cursor: pointer; }.work-scroll-card--fleurie { aspect-ratio: 4 / 5; }.work-scroll-card video, .work-scroll-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-long) var(--ease-out); }.work-scroll-card--fleurie img { transform: scale(1.07); }.work-scroll-card--angel video { transform: none; }.work-scroll-card:hover video, .work-scroll-card:focus-visible video { transform: scale(1.03); }.work-scroll-card--fleurie:hover img, .work-scroll-card--fleurie:focus-visible img { transform: scale(1.07); }.work-scroll-card--angel:hover video, .work-scroll-card--angel:focus-visible video { transform: none; }.work-scroll-hint { position: absolute; z-index: 3; bottom: var(--space-2); left: 50%; margin: 0; transform: translateX(-50%); color: var(--color-paper); font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.work-scroll-card__label { position: absolute; z-index: 2; top: 0.4rem; right: auto; bottom: auto; left: 0.4rem; display: inline-block; width: max-content; max-width: calc(100% - 0.8rem); padding: 0.28rem 0.5rem; border: 0.5px solid rgba(255, 255, 255, 0.12); border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.8); font-family: var(--font-body); font-size: 0.64rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; text-align: left; white-space: nowrap; backdrop-filter: blur(15px) saturate(120%); -webkit-backdrop-filter: blur(15px) saturate(120%); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25), 0 0 40px rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1); pointer-events: none; }
.work-piece > span { position: absolute; right: var(--space-1); bottom: var(--space-1); left: var(--space-1); padding: 0.35rem 0.45rem; border: 1px solid color-mix(in srgb, var(--color-light) 58%, transparent); background: color-mix(in srgb, var(--color-paper) 72%, transparent); color: var(--color-light); font-family: var(--font-mono); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.03em; line-height: 1.35; text-align: left; text-transform: uppercase; opacity: 0; transform: translateY(0.5rem); transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.work-piece:hover, .work-piece:focus-visible { z-index: 3; outline: none; transform: scale(1.035); box-shadow: 0 1.2rem 2.4rem color-mix(in srgb, var(--color-paper) 28%, transparent); }.work-piece:hover > img, .work-piece:focus-visible > img, .work-piece:hover > video, .work-piece:focus-visible > video { transform: scale(1.025); }.work-piece:hover > span, .work-piece:focus-visible > span { opacity: 1; transform: translateY(0); }
.work-canvas--scroll .work-piece--fleurie, .work-canvas--scroll .work-piece--fleurie:hover, .work-canvas--scroll .work-piece--fleurie:focus-visible { transform: translateY(-50%); }.work-canvas--scroll .work-piece--fleurie > img, .work-canvas--scroll .work-piece--fleurie:hover > img, .work-canvas--scroll .work-piece--fleurie:focus-visible > img { transform: scale(1.07); }
.project-dialog { width: min(92vw, 74rem); height: min(91dvh, 54rem); max-width: none; max-height: 91dvh; padding: clamp(1.25rem, 2.8vw, 2.5rem); overflow: auto; border: 1px solid var(--color-paper); border-radius: var(--radius-sm); background: var(--color-hero); color: var(--color-paper); box-shadow: 0 2rem 5rem color-mix(in srgb, var(--color-paper) 42%, transparent); }.project-dialog[open] { animation: project-enter var(--dur-long) var(--ease-out) both; }.project-dialog::backdrop { background: color-mix(in srgb, var(--color-paper) 40%, transparent); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); }
.project-dialog__close { position: absolute; z-index: 2; top: var(--space-2); right: var(--space-2); width: 2.5rem; height: 2.5rem; display: grid; place-items: center; padding: 0; border: 0.5px solid rgba(255, 255, 255, 0.2); border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: var(--color-paper); font-family: var(--font-copy); font-size: 1.7rem; line-height: 1; cursor: pointer; }.project-dialog__close:hover, .project-dialog__close:focus-visible { outline: none; }
.project-dialog__content { display: grid; gap: var(--space-3); }.project-dialog__content h2 { margin: 0; padding-right: var(--space-5); color: var(--color-paper); font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 5.5rem); font-weight: 400; line-height: 0.85; letter-spacing: -0.065em; }.project-dialog__description { max-width: 34rem; margin: 0; color: var(--color-paper); font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700; line-height: 1.55; }.project-dialog__site, .project-dialog__video { display: block; flex: 0 0 min(65dvh, 47rem); width: 100%; height: min(65dvh, 47rem); min-height: min(65dvh, 47rem); max-height: min(65dvh, 47rem); box-sizing: border-box; border: 1px solid var(--color-paper); border-radius: calc(var(--radius-sm) / 2); background: var(--color-hero); }.project-dialog__video { width: min(100%, calc(min(65dvh, 47rem) * 0.5625)); aspect-ratio: 9 / 16; justify-self: center; object-fit: contain; }
.project-dialog--video { display: grid; place-items: center; width: auto; height: auto; max-width: none; max-height: none; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }.project-dialog--video::backdrop { background: color-mix(in srgb, var(--color-paper) 18%, transparent); backdrop-filter: blur(28px) saturate(1.05); -webkit-backdrop-filter: blur(28px) saturate(1.05); }.project-dialog--video .project-dialog__content { position: relative; display: grid; place-items: center; width: fit-content; }.project-dialog--video .project-dialog__content > h2, .project-dialog--video .project-dialog__content > p { display: none; }.project-dialog--video .project-dialog__video { display: block; width: min(48.375dvh, 90vw); height: auto; aspect-ratio: 9 / 16; max-width: 90vw; max-height: 86dvh; margin: 0 auto; border: 0; border-radius: 0; background: transparent; object-fit: contain; }.project-dialog--video .project-dialog__site { display: block; width: min(90vw, 86rem); height: min(82dvh, 54rem); min-height: 0; max-width: 90vw; max-height: 82dvh; margin: 0 auto; border: 0; border-radius: 0; background: transparent; }.project-dialog--video .project-dialog__close { position: fixed; top: 1.25rem; right: 1.25rem; border-color: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.1); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25), 0 0 40px rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1); backdrop-filter: blur(15px) saturate(120%); -webkit-backdrop-filter: blur(15px) saturate(120%); }.project-dialog--video .project-dialog__close:hover, .project-dialog--video .project-dialog__close:focus-visible { border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.22); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2), 0 0 40px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.06); }.project-video-controls { position: absolute; right: 0.65rem; bottom: 0.65rem; left: 0.65rem; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 0.7rem; width: auto; margin: 0; padding: 0.5rem 1rem; border: 0.5px solid rgba(255, 255, 255, 0.2); border-radius: 999px; background: rgba(255, 255, 255, 0.1); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25), 0 0 40px rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.1); backdrop-filter: blur(15px) saturate(120%); -webkit-backdrop-filter: blur(15px) saturate(120%); opacity: 0; transform: translateY(0.35rem); pointer-events: none; transition: opacity 160ms ease, transform 160ms ease; }.project-dialog--video .project-dialog__content:hover .project-video-controls, .project-dialog--video .project-dialog__content:focus-within .project-video-controls { opacity: 1; transform: translateY(0); pointer-events: auto; }.project-video-control { display: grid; flex: 0 0 auto; place-items: center; width: 1.8rem; height: 1.8rem; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.18); color: var(--color-paper); font: 700 0.8rem/1 var(--font-body); cursor: pointer; }.project-video-control:hover, .project-video-control:focus-visible { background: rgba(255, 255, 255, 0.3); outline: none; }.project-video-progress { flex: 0 1 18rem; min-width: 4rem; height: 0.45rem; appearance: none; -webkit-appearance: none; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; background: rgba(255, 255, 255, 0.12); box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.28), inset -1px -1px 1px rgba(255, 255, 255, 0.16); backdrop-filter: blur(8px); cursor: pointer; }.project-video-progress::-webkit-slider-thumb { width: 0.75rem; height: 0.75rem; appearance: none; -webkit-appearance: none; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50%; background: rgba(255, 255, 255, 0.72); box-shadow: 0 0.1rem 0.35rem rgba(0, 0, 0, 0.12); }.project-video-progress::-moz-range-thumb { width: 0.75rem; height: 0.75rem; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50%; background: rgba(255, 255, 255, 0.72); box-shadow: 0 0.1rem 0.35rem rgba(0, 0, 0, 0.12); }.project-video-time { flex: 0 0 auto; color: var(--color-paper); font: 700 0.65rem/1 var(--font-mono); white-space: nowrap; }
.project-dialog--video .project-dialog__image { display: block; width: min(90vw, 54rem); height: min(82dvh, 54rem); max-width: 90vw; max-height: 82dvh; margin: 0 auto; object-fit: contain; }
.project-media-loader { position: absolute; z-index: 4; top: 50%; left: 50%; width: 4rem; height: 4rem; display: grid; place-items: center; border: 0.5px solid rgba(255, 255, 255, 0.12); border-radius: 50%; background: rgba(255, 255, 255, 0.1); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18), 0 0 40px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.12); backdrop-filter: blur(15px) saturate(120%); -webkit-backdrop-filter: blur(15px) saturate(120%); transform: translate(-50%, -50%); opacity: 1; visibility: visible; pointer-events: none; transition: opacity 180ms ease, visibility 180ms ease; }.project-media-loader.is-hidden { opacity: 0; visibility: hidden; }.project-media-loader__spinner { width: 2.5rem; height: 2.5rem; animation: project-loader-rotate 2s linear infinite; }.project-media-loader__path { stroke: rgba(255, 255, 255, 0.82); stroke-linecap: round; filter: drop-shadow(0 0.08rem 0.2rem rgba(255, 255, 255, 0.28)); animation: project-loader-dash 1.5s ease-in-out infinite; }
@keyframes project-loader-rotate { to { transform: rotate(360deg); } }
@keyframes project-loader-dash { 0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; } 100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; } }
 .work-canvas--scroll { --work-strip-height: min(42dvh, 27rem); }.work-topline { position: absolute; z-index: 2; top: clamp(5.5rem, 11vh, 8rem); right: 0; left: 0; min-height: 16rem; }.work-topline .work-canvas__copy { position: absolute; top: 0; left: 50%; width: min(38rem, calc(100% - 3rem)); display: grid; justify-items: center; transform: translateX(-50%); text-align: center; pointer-events: none; }.work-website-card { position: absolute; top: clamp(0.5rem, 1vw, 1rem); right: auto; left: clamp(2rem, 9vw, 10rem); display: flex; flex-direction: column; width: clamp(10rem, min(18vw, calc((100dvh - var(--work-strip-height) - 13.5rem) * 0.8)), 18rem); padding: 0; border: 0; background: transparent; color: var(--color-paper); cursor: pointer; }.work-website-card img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-sm); }.work-website-card > span { order: -1; display: block; margin: 0 0 var(--space-1); font-family: var(--font-mono); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.055em; line-height: 1.45; text-align: left; text-transform: uppercase; }.work-website-card:focus-visible { outline: 2px solid var(--color-paper); outline-offset: var(--space-1); }.work-scroll-container { height: var(--work-strip-height); }.work-scroll-label { position: absolute; z-index: 3; bottom: calc(var(--work-strip-height) + var(--space-5) + var(--space-1)); left: clamp(1.5rem, 6vw, 7rem); margin: 0; color: var(--color-paper); font-family: var(--font-mono); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.055em; text-transform: uppercase; }
@keyframes project-enter { from { opacity: 0; transform: translateY(1rem) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (min-width: 761px) { .work-website-card { top: calc(-1 * var(--space-2)); left: 25%; transform: translateX(-50%); }.work-scroll-label { bottom: calc(var(--work-strip-height) + var(--space-5) + var(--space-2)); } }
@media (min-width: 1025px) { .work-website-card { width: clamp(9.25rem, min(16vw, calc((100dvh - var(--work-strip-height) - 14.25rem) * 0.8)), 16rem); } }
@media (min-width: 761px) and (max-width: 1024px) { .work-website-card { top: calc(100dvh - var(--work-strip-height) - 27.3rem); right: auto; bottom: auto; left: var(--space-5); width: 10rem; transform: none; }.work-scroll-label { bottom: calc(var(--work-strip-height) + var(--space-5) + var(--space-1)); } }
@media (max-width: 760px) { .work-website-card { top: calc(100dvh - var(--work-strip-height) - 18rem); right: auto; bottom: auto; left: var(--space-3); transform: none; } }
@media (max-width: 760px) { .video-hero h1 { max-width: 100%; white-space: normal; font-size: clamp(3.8rem, 20vw, 7rem); }.hero-role { max-width: 16rem; }.hero-content { padding: 7rem var(--space-3) var(--space-4); }.hero-credit { left: var(--space-3); right: auto; }.page-intro, .contact-panel { min-height: 78svh; padding: 8rem var(--space-3) var(--space-5); }.page-intro h1, .contact-panel h1 { font-size: clamp(3.7rem, 15vw, 6rem); }.work-list, .approach-grid { grid-template-columns: 1fr; }.work-card, .approach-step { min-height: 21rem; border-right: 0; }.site-footer { padding: var(--space-3); align-items: flex-start; flex-direction: column; gap: var(--space-1); } }
@media (max-width: 760px) { .work-canvas { min-height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding: 7rem var(--space-3) var(--space-6); }.work-canvas--scroll { min-height: 100dvh; display: block; padding: 6.5rem var(--space-3) var(--space-3); }.work-canvas__copy { position: absolute; top: var(--space-6); left: 50%; width: min(100%, 22rem); transform: translateX(-50%); text-align: center; justify-items: center; }.work-canvas__copy h1 { font-size: clamp(4.5rem, 20vw, 6.75rem); }.work-scroll-container { right: var(--space-3); bottom: var(--space-5); left: var(--space-3); width: auto; height: min(43dvh, 25rem); transform: none; }.work-scroll-card { margin-right: var(--space-2); }.work-scroll-hint { bottom: var(--space-1); font-size: 0.58rem; }.project-dialog { width: calc(100vw - 1.5rem); height: 94dvh; max-height: 94dvh; padding: var(--space-3); }.project-dialog__site, .project-dialog__video { flex-basis: 68dvh; height: 68dvh; min-height: 68dvh; max-height: 68dvh; }.project-dialog__video { width: min(100%, calc(68dvh * 0.5625)); }.project-dialog__content h2 { font-size: clamp(2.75rem, 15vw, 4.5rem); } }
@media (max-width: 760px) { .work-canvas--scroll { --work-strip-height: min(43dvh, 25rem); }.work-topline { top: var(--space-5); min-height: 10rem; }.work-topline .work-canvas__copy { width: min(100% - 9rem, 22rem); }.work-website-card { right: auto; left: var(--space-3); width: 5.5rem; }.work-website-card > span { font-size: 0.56rem; }.work-topline .work-canvas__copy h1 { font-size: clamp(3.4rem, 15vw, 5rem); }.work-scroll-container { height: var(--work-strip-height); }.work-scroll-label { bottom: calc(var(--work-strip-height) + var(--space-5) + var(--space-1)); left: var(--space-3); font-size: 0.65rem; } }
@media (max-width: 760px) { .work-website-card { top: calc(100dvh - var(--work-strip-height) - 23rem); left: var(--space-4); width: 8.5rem; } }
 .work-scroll-label, .work-website-card > span { font-size: 0.82rem; font-weight: 800; }
@media (max-width: 760px) { .work-scroll-label, .work-website-card > span { font-size: 0.72rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; } }
@media (prefers-reduced-motion: reduce) { .project-media-loader__spinner { animation-duration: 4s !important; }.project-media-loader__path { animation: none !important; stroke-dasharray: 70, 150; } }

/* One-page portfolio — the water canvas stays behind every section. */
html:has(body.page--folio), body.page--folio { background: var(--color-hero); color: var(--color-paper); }
html:has(body.page--folio) { scroll-behavior: smooth; }
body.page--folio { --folio-gutter: clamp(1.5rem, 5vw, 5rem); --folio-panel-inset: clamp(2rem, 4.5vw, 4rem); --folio-content-gutter: clamp(2.5rem, 7.5vw, 6.5rem); --folio-media-inset: calc(var(--folio-panel-inset) + 1.25rem); min-height: 100%; }
body.page--folio #c { position: fixed; z-index: 0; inset: 0; width: 100%; height: 100%; pointer-events: none; }
body.page--folio main { position: relative; z-index: 1; }
  .folio-header { --header-bg: 0; --header-shadow: 0; --header-blur: 0px; --header-brightness: 1; --header-saturation: 1; position: fixed; z-index: 10; inset: 0 0 auto; height: clamp(4.25rem, 6vw, 5rem); background: rgb(144 170 235 / var(--header-bg)); box-shadow: 0 0.65rem 1.8rem rgb(255 244 237 / var(--header-shadow)); backdrop-filter: blur(var(--header-blur)) brightness(var(--header-brightness)) saturate(var(--header-saturation)); -webkit-backdrop-filter: blur(var(--header-blur)) brightness(var(--header-brightness)) saturate(var(--header-saturation)); }
.folio-mark { position: absolute; top: 50%; left: var(--folio-gutter); width: clamp(3rem, 4vw, 3.5rem); height: clamp(3rem, 4vw, 3.5rem); display: grid; place-items: center; border: 1px solid var(--color-paper); border-radius: 50%; background: var(--color-paper); color: var(--color-hero); font-family: var(--font-display); font-size: clamp(1.7rem, 2.5vw, 2.2rem); font-weight: 800; letter-spacing: -0.1em; line-height: 1; transform: translateY(-50%); }
.folio-mark > span { display: block; transform: translate(-0.025em, -0.06em); }
.folio-section { position: relative; min-height: 100svh; margin: 0; padding: clamp(7rem, 13vw, 11rem) var(--folio-content-gutter) clamp(5rem, 10vw, 9rem); overflow: clip; isolation: isolate; background: transparent; }
.folio-section::before { position: absolute; inset: var(--folio-panel-inset); z-index: -1; content: ""; border: 1px solid var(--color-glass-edge); border-radius: clamp(1rem, 1.75vw, 1.5rem); background: linear-gradient(135deg, var(--color-glass-fill), color-mix(in srgb, var(--color-light) 8%, transparent)); backdrop-filter: blur(var(--glass-blur)) saturate(130%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(130%); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-paper) 30%, transparent); pointer-events: none; }
.folio-section::after { position: absolute; inset: var(--folio-panel-inset); z-index: -1; content: ""; border-radius: clamp(1rem, 1.75vw, 1.5rem); background: linear-gradient(135deg, color-mix(in srgb, var(--color-paper) 12%, transparent), transparent 44%, color-mix(in srgb, var(--color-light) 8%, transparent)); pointer-events: none; }
.folio-hero::before, .folio-hero::after { display: none; }
.folio-section:not(.folio-hero)::before, .folio-section:not(.folio-hero)::after { inset: var(--folio-panel-inset); border-radius: 36px; corner-shape: squircle; }
  .folio-kicker, .folio-notes, .folio-skills, .folio-stages span, .scroll-rail, .folio-footer { color: var(--color-secondary); font-family: var(--font-mono); font-size: clamp(0.7rem, 0.9vw, 0.84rem); font-weight: 700; letter-spacing: 0.055em; text-transform: uppercase; }
 .folio-kicker { margin: 0 0 var(--space-4); }
.folio-hero { display: grid; min-height: 100dvh; place-items: center; padding-block: clamp(6rem, 14vh, 12rem); text-align: center; }
.folio-hero__content { max-width: 70rem; }
 .folio-hero h1, .folio-section h2 { max-width: 12ch; min-width: 0; margin: 0; color: var(--color-paper); font-family: var(--font-display); font-size: clamp(4.2rem, 10.5vw, 10.5rem); font-style: normal; font-weight: 400; line-height: 0.83; letter-spacing: -0.075em; overflow-wrap: anywhere; }
 .folio-hero h1, .folio-section h2, .folio-stages h3, .folio-email, .project-dialog__content h2 { filter: drop-shadow(0 0.08rem 0.12rem color-mix(in srgb, var(--color-ink) 32%, transparent)); }
  @property --hero-glass-shift {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 0%;
  }
  @keyframes hero-glass-shimmer {
    0%, 100% { --hero-glass-shift: 0%; }
    50% { --hero-glass-shift: 100%; }
  }
  .folio-hero h1 {
    position: relative;
    isolation: isolate;
    display: inline-block;
    filter: none;
    padding: 0.1em 0.1em 0.1em 0;
    line-height: 1;
    color: transparent;
    background: linear-gradient(115deg, color-mix(in srgb, var(--color-paper) 100%, transparent), color-mix(in srgb, var(--color-light) 92%, transparent) 48%, color-mix(in srgb, var(--color-paper) 98%, transparent));
    background-position: var(--hero-glass-shift) 50%;
    background-size: 180% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: hero-glass-shimmer 8s var(--ease-out) infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .folio-hero h1 { animation: none; }
  }
  .folio-role { max-width: 34rem; margin: var(--space-2) auto 0; color: var(--color-secondary); font-family: var(--font-body); font-size: clamp(1.1rem, 2vw, 1.75rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.04em; }
.folio-split { display: grid; gap: var(--space-5); align-items: end; }
  .folio-copy { max-width: 42rem; color: var(--color-secondary); font-family: var(--font-body); font-size: clamp(1.1rem, 1.8vw, 1.55rem); font-weight: 700; line-height: 1.45; }
.folio-copy p { margin: 0 0 var(--space-3); }
.folio-notes { display: grid; gap: var(--space-2); max-width: 42rem; margin-top: var(--space-6); }
.folio-notes p { margin: 0; }
  .folio-lede { max-width: 48rem; margin: var(--space-5) 0 0; color: var(--color-secondary); font-family: var(--font-body); font-size: clamp(1.1rem, 2vw, 1.65rem); font-weight: 700; line-height: 1.45; }
.folio-stages { display: grid; margin-top: var(--space-6); }
.folio-stages article { min-height: 21rem; padding: var(--space-4) 0; }
 .folio-stages h3 { max-width: 9ch; margin: var(--space-4) 0 var(--space-2); color: var(--color-paper); font-family: var(--font-display); font-size: clamp(2.3rem, 4.8vw, 4.8rem); font-weight: 400; line-height: 0.9; letter-spacing: -0.06em; }
  .folio-stages p { max-width: 36rem; margin: 0; color: var(--color-secondary); font-family: var(--font-body); font-size: 1rem; font-weight: 700; line-height: 1.6; }
.folio-skills { display: flex; flex-wrap: wrap; gap: var(--space-2); max-width: 64rem; margin-top: var(--space-6); }
.folio-skills p { margin: 0; padding: 0.55rem 0.7rem; background: color-mix(in srgb, var(--color-paper) 7%, transparent); color: var(--color-paper); }
.folio-work { padding: clamp(5rem, 10vw, 9rem) 0 0; }
.folio-work > .folio-kicker { margin-inline: var(--folio-content-gutter); }
.folio-work .work-canvas { min-height: 100svh; padding-top: clamp(4rem, 8vw, 7rem); }
.folio-work .work-canvas, .folio-work .work-canvas--scroll { background: transparent; }
.folio-work .work-canvas--scroll::before { position: absolute; z-index: 0; inset: 0; content: ""; pointer-events: none; background: transparent; }
.folio-work .work-topline { top: clamp(4rem, 10vh, 7rem); }
 .folio-work .work-canvas__copy h2 { max-width: none; color: var(--color-paper); font-family: var(--font-display); font-size: clamp(4rem, 8vw, 8.75rem); font-weight: 400; line-height: 0.8; letter-spacing: -0.075em; }
.folio-work .work-scroll-container::before { background: linear-gradient(90deg, color-mix(in srgb, var(--color-hero) 72%, transparent), transparent); }.folio-work .work-scroll-container::after { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-hero) 72%, transparent)); }
.folio-contact { display: flex; flex-direction: column; justify-content: space-between; min-height: 100dvh; }
 .folio-email { align-self: flex-start; margin-top: var(--space-5); color: var(--color-paper); font-family: var(--font-display); font-size: clamp(1.55rem, 3.8vw, 3.8rem); font-weight: 400; line-height: 1.05; letter-spacing: -0.06em; overflow-wrap: anywhere; }
 .folio-footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); justify-content: space-between; margin-top: var(--space-7); padding-top: var(--space-2); }
.folio-footer a { white-space: nowrap; }
.scroll-rail { position: absolute; top: 50%; right: var(--folio-gutter); display: flex; gap: 20px; align-items: center; padding: 0; font-family: var(--font-body); font-size: clamp(0.82rem, 1.1vw, 1.05rem); letter-spacing: -0.02em; line-height: 1; text-transform: none; transform: translateY(-50%); }
  .scroll-rail a { color: var(--color-secondary); font-weight: 800; white-space: nowrap; opacity: 0.92; transition: color 150ms var(--ease-out), opacity 150ms var(--ease-out); }.scroll-rail a[aria-current="true"], .scroll-rail a:hover { opacity: 1; }.scroll-rail a:hover { color: var(--color-paper); }
.scroll-rail a:focus-visible, .folio-mark:focus-visible, .folio-email:focus-visible { outline: 2px solid var(--color-paper); outline-offset: 4px; }
@media (min-width: 60rem) { .folio-split { grid-template-columns: minmax(0, 0.7fr) minmax(0, 0.78fr); gap: clamp(1.25rem, 2.5vw, 3rem); }.folio-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); }.folio-stages article { min-height: 27rem; padding: var(--space-4); }.folio-stages p { max-width: 22rem; }.folio-work .work-website-card { left: 25%; } }
@media (min-width: 60rem) { .folio-about .folio-copy { transform: translateY(calc(var(--space-2) + 0.5rem)); } }
/* One shared media rail on every screen size; desktop only changes the text alignment. */
.folio-work .work-canvas--scroll { --work-strip-height: min(43dvh, 25rem); min-height: 100dvh; padding: 6.5rem var(--folio-content-gutter) var(--space-3); }
.folio-work .work-scroll-container { top: auto; right: var(--folio-media-inset); bottom: var(--space-5); left: var(--folio-media-inset); height: var(--work-strip-height); transform: none; }
.folio-work .work-scroll-strip { padding-block: var(--space-3); }
.folio-work .work-scroll-card { margin-right: var(--space-2); }
.folio-work .work-scroll-hint { bottom: var(--space-1); font-size: 0.68rem; }
@media (min-width: 48rem) { .folio-work { padding: 0; }.folio-work > .folio-kicker { display: none; }.folio-work .work-topline { top: clamp(5.5rem, 9vh, 7rem); display: block; min-height: 0; }.folio-work .work-topline .work-canvas__copy { top: 0; left: var(--folio-content-gutter); width: min(45rem, calc(100% - var(--folio-content-gutter) - var(--folio-content-gutter))); justify-items: start; transform: none; text-align: left; }.folio-work .work-canvas__copy > p { display: block; }.folio-work .work-canvas__copy h2 { font-size: clamp(4rem, 9.5vw, 9.5rem); line-height: 0.85; }.folio-work .work-canvas__copy > span { margin-top: calc(var(--space-3) + 0.4rem); font-size: 0.86rem; }.folio-work .work-canvas--scroll { --work-strip-height: min(55dvh, 40rem); --work-gallery-default-top: calc(clamp(24.875rem, 51dvh, 37rem) - 0.5rem); min-height: calc(max(var(--work-gallery-default-top), var(--work-copy-safe-bottom, 0px)) + var(--work-strip-height) + var(--folio-panel-inset) + var(--space-1)); padding: 0; }.folio-work .work-scroll-container { top: max(var(--work-gallery-default-top), var(--work-copy-safe-bottom, 0px)); right: var(--folio-media-inset); bottom: auto; left: var(--folio-media-inset); transform: none; }.folio-work .work-scroll-strip { padding-block: 0; }.folio-work .work-scroll-card { margin-right: clamp(0.8rem, 1.2vw, 1.4rem); }.folio-work .work-scroll-hint { right: 0; bottom: 6dvh; left: 0; font-size: 0.74rem; } }

/* Keep the desktop Selected Work title words intact and separated. */
@media (min-width: 48rem) {
  body.page--folio .folio-work .work-canvas__copy h2 span {
    display: block;
    white-space: nowrap;
  }
}

@media (min-width: 60rem) {
  body.page--folio .folio-work .work-topline {
    top: clamp(7rem, 13vw, 11rem);
  }

  body.page--folio .folio-work .work-canvas--scroll {
    --work-gallery-default-top: calc(clamp(24.875rem, 51dvh, 37rem) + var(--space-3) + var(--space-4) + var(--space-1) + 4px);
    min-height: calc(max(var(--work-gallery-default-top), var(--work-copy-safe-bottom, 0px)) + var(--work-strip-height) + var(--folio-panel-inset) + var(--space-1));
  }

  body.page--folio .folio-work .work-scroll-container {
    top: max(var(--work-gallery-default-top), var(--work-copy-safe-bottom, 0px));
  }
}
@media (max-width: 40rem) { .folio-mark { width: 2.65rem; height: 2.65rem; font-size: 1.55rem; }.folio-section { padding-inline: var(--folio-content-gutter); }.folio-hero h1, .folio-section h2 { font-size: clamp(3.6rem, 19vw, 6rem); }.folio-role { max-width: 15rem; }.scroll-rail { font-size: 0.76rem; }.folio-work > .folio-kicker { margin-inline: var(--folio-content-gutter); }.folio-footer { flex-direction: column; }.folio-work .work-topline .work-canvas__copy { width: min(100% - 8rem, 20rem); }.folio-work .work-website-card { left: var(--space-3); width: 7.5rem; } }


/* Responsive folio gutters: compact mobile framing with centered content. */
body.page--folio {
  --folio-gutter: 12px;
  --folio-panel-inset: 12px;
  --folio-content-gutter: 12px;
  --folio-media-inset: 24px;
}

/* Keep the Work eyebrow in the same flow as the section title. */
body.page--folio .folio-work .work-canvas__copy > p {
  display: block;
  margin: 0 0 var(--space-4);
  color: var(--color-secondary);
  font-family: var(--font-mono);
  font-size: clamp(0.7rem, 0.9vw, 0.84rem);
  font-weight: 700;
  letter-spacing: 0.055em;
  line-height: 1.45;
  text-transform: uppercase;
}

body.page--folio .folio-work .work-canvas__copy h2 {
  margin-top: 0;
}

@media (min-width: 48rem) and (max-width: 59.999rem) {
  body.page--folio {
    --folio-gutter: 24px;
    --folio-panel-inset: 24px;
    --folio-content-gutter: 24px;
    --folio-media-inset: 40px;
  }

  body.page--folio .folio-about,
  body.page--folio .folio-approach {
    padding-bottom: calc(clamp(5rem, 10vw, 9rem) + 24px);
  }
}

@media (min-width: 60rem) {
  body.page--folio {
    --folio-gutter: clamp(1.5rem, 5vw, 5rem);
    --folio-panel-inset: clamp(2rem, 4.5vw, 4rem);
    --folio-content-gutter: clamp(2.5rem, 7.5vw, 6.5rem);
    --folio-media-inset: calc(var(--folio-panel-inset) + 1.25rem);
  }
}

@media (max-width: 59.999rem) {
  body.page--folio .folio-section:not(.folio-hero) {
    text-align: center;
  }

  body.page--folio .folio-split {
    justify-items: center;
  }

  body.page--folio .folio-copy,
  body.page--folio .folio-notes,
  body.page--folio .folio-lede,
  body.page--folio .folio-stages,
  body.page--folio .folio-skills {
    margin-inline: auto;
    text-align: center;
  }

  body.page--folio .folio-stages {
    width: min(100%, 36rem);
  }

  body.page--folio .folio-stages article {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  body.page--folio .folio-stages p {
    text-align: center;
  }

  body.page--folio .folio-skills {
    justify-content: center;
  }

  body.page--folio .folio-email {
    align-self: center;
    text-align: center;
  }

  body.page--folio .folio-footer {
    text-align: center;
  }

  body.page--folio .folio-work > .folio-kicker {
    text-align: center;
  }
}


@media (max-width: 47.999rem) {
  /* One mobile spacing rhythm for every glass section. */
  body.page--folio {
    --folio-mobile-related-small: 12px;
    --folio-mobile-unrelated-small: 20px;
    --folio-mobile-related-large: 32px;
    --folio-mobile-unrelated-large: 64px;
    --folio-mobile-gap: var(--folio-mobile-related-small);
    --folio-mobile-top-inset: var(--folio-mobile-unrelated-large);
    --folio-mobile-bottom-inset: var(--folio-mobile-unrelated-large);
  }

  body.page--folio .folio-section:not(.folio-hero) {
    min-height: 0;
    padding: 20px;
  }

  body.page--folio .folio-section.folio-about {
    padding-bottom: 44px;
  }

  body.page--folio .folio-section.folio-approach {
    padding-bottom: 44px;
  }

  body.page--folio .folio-contact {
    padding-bottom: 32px;
  }

  body.page--folio .folio-section:not(.folio-hero) + .folio-section:not(.folio-hero) {
    margin-top: 40px;
  }

  body.page--folio .folio-section:not(.folio-hero):not(.folio-work) {
    padding-top: calc(var(--folio-mobile-related-large) + 4px);
    padding-inline: var(--folio-mobile-unrelated-small);
    text-align: left;
  }

  body.page--folio .folio-section:not(.folio-hero):not(.folio-work) .folio-split {
    justify-items: start;
  }

  body.page--folio .folio-section:not(.folio-hero):not(.folio-work) .folio-copy,
  body.page--folio .folio-section:not(.folio-hero):not(.folio-work) .folio-notes,
  body.page--folio .folio-section:not(.folio-hero):not(.folio-work) .folio-lede,
  body.page--folio .folio-section:not(.folio-hero):not(.folio-work) .folio-stages,
  body.page--folio .folio-section:not(.folio-hero):not(.folio-work) .folio-skills {
    margin-inline: 0;
    text-align: left;
  }

  body.page--folio .folio-section:not(.folio-hero) > .folio-kicker {
    margin: 0 0 var(--folio-mobile-unrelated-small);
  }

  body.page--folio .folio-section:not(.folio-hero):not(.folio-work) > h2,
  body.page--folio .folio-section:not(.folio-hero):not(.folio-work) > .folio-split {
    padding-top: var(--folio-mobile-related-small);
  }

  body.page--folio .folio-split,
  body.page--folio .folio-stages {
    gap: var(--folio-mobile-related-small);
  }

  body.page--folio .folio-copy p {
    margin-bottom: var(--folio-mobile-gap);
  }

  body.page--folio .folio-about .folio-copy {
    padding-top: calc(var(--folio-mobile-unrelated-large) - 16px);
    transform: translateY(-8px);
  }

  body.page--folio .folio-copy p:last-child {
    margin-bottom: 0;
  }

  body.page--folio .folio-notes,
  body.page--folio .folio-lede,
  body.page--folio .folio-stages,
  body.page--folio .folio-skills,
  body.page--folio .folio-email {
    margin-top: var(--folio-mobile-related-large);
  }

  body.page--folio .folio-about .folio-notes {
    margin-top: calc(var(--folio-mobile-related-large) + var(--folio-mobile-related-small));
  }

  body.page--folio .folio-stages article {
    min-height: 0;
    align-items: flex-start;
    padding-block: var(--folio-mobile-unrelated-small);
  }

  body.page--folio .folio-stages p {
    text-align: left;
  }

  body.page--folio .folio-skills {
    justify-content: flex-start;
  }

  body.page--folio .folio-email {
    align-self: flex-start;
    text-align: left;
  }

  body.page--folio .folio-footer {
    width: 100%;
    align-items: center;
    margin-top: var(--folio-mobile-unrelated-large);
    margin-bottom: 32px;
    justify-content: center;
    text-align: center;
  }

  body.page--folio .folio-work .work-canvas__copy > p {
    margin-bottom: var(--folio-mobile-gap);
  }

  body.page--folio .folio-work .work-topline {
    top: var(--folio-mobile-top-inset);
  }

  body.page--folio .folio-work .work-canvas__copy h2 {
    margin-top: 0;
  }

  body.page--folio .folio-work .work-canvas__copy > span {
    margin-top: var(--folio-mobile-gap);
  }

  body.page--folio .folio-work .work-canvas--scroll {
    --work-strip-height: min(43svh, 25rem);
    min-height: 0;
    height: calc(var(--folio-mobile-top-inset) + clamp(10rem, 45vw, 11.125rem) + var(--folio-mobile-related-small) + var(--work-strip-height) + var(--folio-mobile-gap));
    padding: 0 12px var(--folio-mobile-gap);
  }

  body.page--folio .folio-work .work-scroll-container {
    top: calc(var(--folio-mobile-top-inset) + clamp(10rem, 45vw, 11.125rem) + var(--folio-mobile-related-small));
    right: 12px;
    bottom: auto;
    left: 12px;
    touch-action: pan-y;
    overscroll-behavior-x: contain;
  }

  body.page--folio .folio-work .work-scroll-strip {
    touch-action: pan-y;
  }
}


@media (max-width: 47.999rem) {
  body.page--folio .folio-work .work-topline .work-canvas__copy {
    width: min(calc(100% - 3rem), 22rem);
  }

  body.page--folio .folio-work .work-canvas__copy h2 {
    font-size: clamp(3.6rem, 19vw, 6rem);
  }

  body.page--folio .folio-work .work-canvas__copy h2 span {
    display: block;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
  }

  body.page--folio .folio-work .work-canvas__copy h2 span:last-child {
    font-size: 0;
  }

  body.page--folio .folio-work .work-canvas__copy h2 span:last-child::before {
    content: "Work";
    font-size: clamp(3.6rem, 19vw, 6rem);
  }

  body.page--folio .project-dialog--video {
    inset: 0;
    width: 100vw;
    height: 100dvh;
    margin: 0;
  }

  body.page--folio .project-dialog--video .project-dialog__content {
    width: fit-content;
    justify-items: center;
  }

  body.page--folio .project-dialog--video .project-dialog__video,
  body.page--folio .project-dialog--video .project-dialog__image,
  body.page--folio .project-dialog--video .project-dialog__site {
    justify-self: center;
    margin-inline: auto;
  }

  body.page--folio .project-dialog--video .project-dialog__close {
    top: 0.75rem;
    right: 0.75rem;
  }
}
/* Draw player icons in CSS so iOS cannot substitute emoji glyphs. */
.project-video-control { position: relative; font-size: 0; }
.project-video-control::before, .project-video-control::after { content: ""; position: absolute; display: block; width: 0.2rem; height: 0.76rem; border-radius: 999px; background: currentColor; }
.project-video-control::before { transform: translateX(-0.17rem); }
.project-video-control::after { transform: translateX(0.17rem); }
.project-video-control.is-paused::before { width: 0; height: 0; border-block: 0.4rem solid transparent; border-inline-start: 0.65rem solid currentColor; border-radius: 0; background: transparent; transform: translateX(0.06rem); }
.project-video-control.is-paused::after { content: none; }
.project-video-center-control { position: absolute; z-index: 3; top: 50%; left: 50%; width: 4rem; aspect-ratio: 1; padding: 0; border: 0.5px solid rgba(255, 255, 255, 0.12); border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: var(--color-paper); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18), 0 0 40px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(15px) saturate(120%); backdrop-filter: blur(15px) saturate(120%); opacity: 0; transform: translate(-50%, -50%) scale(0.92); cursor: pointer; transition: opacity 180ms ease, transform 180ms ease, background 180ms ease; }
.project-video-center-control.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.project-video-center-control:hover, .project-video-center-control:focus-visible { background: rgba(255, 255, 255, 0.16); outline: none; }
.project-video-center-control::before, .project-video-center-control::after { content: ""; position: absolute; top: 50%; display: block; width: 0.35rem; height: 1.35rem; border-radius: 999px; background: rgba(255, 255, 255, 0.82); box-shadow: 0 0.08rem 0.2rem rgba(255, 255, 255, 0.28); transform: translateY(-50%); }
.project-video-center-control::before { left: calc(50% - 0.58rem); }
.project-video-center-control::after { left: calc(50% + 0.22rem); }
.project-video-center-control.is-paused::before { top: 50%; left: calc(50% - 0.38rem); width: 0; height: 0; border-block: 0.65rem solid transparent; border-inline-start: 1.05rem solid rgba(255, 255, 255, 0.82); border-radius: 0; background: transparent; box-shadow: none; transform: translateY(-50%); }
.project-video-center-control.is-paused::after { content: none; }
.project-video-controls.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.project-dialog--video .project-dialog__content:hover .project-video-controls:not(.is-visible), .project-dialog--video .project-dialog__content:focus-within .project-video-controls:not(.is-visible) { opacity: 0; transform: translateY(0.35rem); pointer-events: none; }

@media (max-width: 760px) {
  .project-dialog--video .project-dialog__content .project-video-controls { opacity: 0; transform: translateY(0.35rem); pointer-events: none; }
  .project-dialog--video .project-dialog__content .project-video-controls.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
}

@media (max-width: 64rem) {
  body.page--folio .project-dialog--video .project-dialog__image {
    width: auto;
    height: auto;
    aspect-ratio: 9 / 16;
  }

  body.page--folio .project-dialog--video .project-dialog__video,
  body.page--folio .project-dialog--video .project-dialog__image,
  body.page--folio .project-dialog--video .project-dialog__site {
    max-width: calc(100vw - 3rem);
  }

  body.page--folio .project-dialog--video .project-dialog__close,
  body.page--folio .project-dialog--video .project-dialog__close:hover,
  body.page--folio .project-dialog--video .project-dialog__close:focus-visible,
  body.page--folio .project-dialog--video .project-dialog__close:active {
    position: absolute;
    top: 0;
    right: 0;
    translate: 50% -50%;
    transform: translateZ(0);
    border-color: rgba(255, 255, 255, 0.08);
    background: color-mix(in srgb, var(--color-hero) 74%, rgba(255, 255, 255, 0.26));
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2), 0 0 40px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    backface-visibility: hidden;
    contain: paint;
    isolation: isolate;
    outline: none;
  }
}