@font-face { font-family:'PP Editorial New'; src:url('../assets/fonts/PPEditorialNew-Regular.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'PP Editorial New'; src:url('../assets/fonts/PPEditorialNew-Italic.otf') format('opentype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'PP Editorial New'; src:url('../assets/fonts/PPEditorialNew-Ultrabold.otf') format('opentype'); font-weight:800 900; font-style:normal; font-display:swap; }
@font-face { font-family:'PP Editorial New'; src:url('../assets/fonts/PPEditorialNew-UltraboldItalic.otf') format('opentype'); font-weight:800 900; font-style:italic; font-display:swap; }
@font-face { font-family:'PP Kyoto'; src:url('../assets/fonts/PPKyoto-Thin.otf') format('opentype'); font-weight:100 200; font-style:normal; font-display:swap; }
@font-face { font-family:'PP Kyoto'; src:url('../assets/fonts/PPKyoto-ThinItalic.otf') format('opentype'); font-weight:100 200; font-style:italic; font-display:swap; }
@font-face { font-family:'PP Kyoto'; src:url('../assets/fonts/PPKyoto-Light.otf') format('opentype'); font-weight:300 400; font-style:normal; font-display:swap; }
@font-face { font-family:'PP Kyoto'; src:url('../assets/fonts/PPKyoto-LightItalic.otf') format('opentype'); font-weight:300 400; font-style:italic; font-display:swap; }
@font-face { font-family:'PP Kyoto'; src:url('../assets/fonts/PPKyoto-Medium.otf') format('opentype'); font-weight:500 600; font-style:normal; font-display:swap; }
@font-face { font-family:'PP Kyoto'; src:url('../assets/fonts/PPKyoto-MediumItalic.otf') format('opentype'); font-weight:500 600; font-style:italic; font-display:swap; }
@font-face { font-family:'PP Kyoto'; src:url('../assets/fonts/PPKyoto-Extrabold.otf') format('opentype'); font-weight:700 900; font-style:normal; font-display:swap; }
@font-face { font-family:'PP Kyoto'; src:url('../assets/fonts/PPKyoto-ExtraboldItalic.otf') format('opentype'); font-weight:700 900; font-style:italic; font-display:swap; }
@font-face { font-family:'PP Neue Montreal'; src:url('../assets/fonts/PPNeueMontreal-Hairline.otf') format('opentype'); font-weight:100 200; font-style:normal; font-display:swap; }
@font-face { font-family:'PP Neue Montreal'; src:url('../assets/fonts/PPNeueMontreal-HairlineItalic.otf') format('opentype'); font-weight:100 200; font-style:italic; font-display:swap; }
@font-face { font-family:'PP Neue Montreal'; src:url('../assets/fonts/PPNeueMontreal-Light.otf') format('opentype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'PP Neue Montreal'; src:url('../assets/fonts/PPNeueMontreal-LightItalic.otf') format('opentype'); font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:'PP Neue Montreal'; src:url('../assets/fonts/PPNeueMontrealText-Book.otf') format('opentype'); font-weight:350; font-style:normal; font-display:swap; }
@font-face { font-family:'PP Neue Montreal'; src:url('../assets/fonts/PPNeueMontrealText-BookItalic.otf') format('opentype'); font-weight:350; font-style:italic; font-display:swap; }
@font-face { font-family:'PP Neue Montreal'; src:url('../assets/fonts/PPNeueMontreal-Regular.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'PP Neue Montreal'; src:url('../assets/fonts/PPNeueMontreal-Italic.otf') format('opentype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'PP Neue Montreal'; src:url('../assets/fonts/PPNeueMontreal-Semibold.otf') format('opentype'); font-weight:500 600; font-style:normal; font-display:swap; }
@font-face { font-family:'PP Neue Montreal'; src:url('../assets/fonts/PPNeueMontreal-SemiboldItalic.otf') format('opentype'); font-weight:500 600; font-style:italic; font-display:swap; }
@font-face { font-family:'PP Neue Montreal'; src:url('../assets/fonts/PPNeueMontreal-Extrabold.otf') format('opentype'); font-weight:700 900; font-style:normal; font-display:swap; }
@font-face { font-family:'PP Neue Montreal'; src:url('../assets/fonts/PPNeueMontreal-ExtraboldItalic.otf') format('opentype'); font-weight:700 900; font-style:italic; font-display:swap; }
html { --folio-paper-base:#FFFFFF; --folio-ink-base:#1E1E1E; --folio-muted-base:#55514B; --folio-line-base:#D2CBC0; --folio-frame-base:#F2EEEA; --folio-frame:var(--folio-frame-base); --folio-frame-ink:#1E1E1E; --folio-frame-muted:#55514B; --folio-project-line:#1E1E1E26; color-scheme:light; background:var(--folio-frame); }
html[data-theme=dark] { --folio-paper-base:#292724; --folio-ink-base:#E8E1D7; --folio-muted-base:#BDB4A8; --folio-line-base:#504B43; --folio-frame-base:#33302C; --folio-frame:var(--folio-frame-base); --folio-frame-ink:var(--folio-ink-base); --folio-frame-muted:var(--folio-muted-base); --folio-project-line:var(--folio-line-base); color-scheme:dark; }
html:has(#portfolio-stage[data-view=project]) { background:var(--folio-paper-base); }
body { margin:0; }
html { --folio-card-radius:10px; --folio-thumb-bg:#E7E2DA; --folio-hover-ease:cubic-bezier(.4,0,.2,1); }
html[data-theme=dark] { --folio-thumb-bg:#403C36; }
html { --folio-media-shadow-contact:#3E352914; --folio-media-shadow-cast:#3E35291F; --folio-media-shadow-soft:#3E35290F; }
html[data-theme=dark] { --folio-media-shadow-contact:#00000024; --folio-media-shadow-cast:#0000003D; --folio-media-shadow-soft:#0000001F; }
main { display:block; }
#portfolio-stage { --folio-paper:var(--folio-paper-base); --folio-ink:var(--folio-ink-base); --folio-muted:var(--folio-muted-base); --folio-line:var(--folio-line-base); container-type:inline-size; color-scheme:inherit; background:var(--folio-frame); padding:24px; color:var(--folio-ink); font-family:'PP Neue Montreal',Arial,sans-serif; width:100%; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; box-sizing:border-box; transition:background-color 650ms var(--folio-hover-ease); }
#portfolio-stage[data-view=project] { --folio-paper:var(--folio-frame-base); --folio-frame:var(--folio-paper-base); --folio-ink:var(--project-ink,var(--folio-ink-base)); --folio-muted:var(--project-muted,var(--folio-muted-base)); --folio-line:var(--folio-project-line); }
#portfolio-stage * { box-sizing:border-box; }
#portfolio-stage [hidden] { display:none !important; }
#portfolio-stage button, #portfolio-stage a { font:inherit; color:inherit; }
#portfolio-stage button { cursor:pointer; background:none; border:0; padding:0; text-align:left; border-radius:0; }
#portfolio-stage a { text-decoration:none; }
#portfolio-stage a:hover, #portfolio-stage .folio-link:hover { text-decoration:underline; text-underline-offset:4px; }
#portfolio-stage p, #portfolio-stage h1, #portfolio-stage h2, #portfolio-stage h3, #portfolio-stage figure { margin:0; }
#portfolio-stage .folio-mono { font-family:'IBM Plex Mono',monospace; font-size:11px; line-height:1.25; font-weight:500; text-transform:uppercase; letter-spacing:-.025em; }
#portfolio-stage .folio-paper { --folio-intro-backdrop:var(--folio-paper); position:relative; isolation:isolate; overflow:clip; background:var(--folio-paper); color:var(--folio-ink); padding:28px 30px 32px; border-radius:var(--folio-card-radius); flex:1; display:flex; flex-direction:column; transition:background-color 650ms var(--folio-hover-ease),color 650ms var(--folio-hover-ease); }
#portfolio-stage .folio-paper[data-signal][data-signal-style=columns][data-signal-palette=cobalt] { --folio-intro-backdrop:#163a9b; background:#163a9b; color:#fff; }
#portfolio-stage .folio-paper[data-signal][data-signal-style=columns][data-signal-palette=ink] { color:#163a9b; }
html[data-theme=dark] #portfolio-stage .folio-paper[data-signal][data-signal-style=columns][data-signal-palette=cobalt] { --folio-intro-backdrop:#192B50; background:#192B50; color:var(--folio-ink-base); }
html[data-theme=dark] #portfolio-stage .folio-paper[data-signal][data-signal-style=columns][data-signal-palette=ink] { background:var(--folio-paper-base); color:#D1EFF3; }
#portfolio-stage .folio-paper[data-signal][data-signal-style=spectrum] { --folio-intro-backdrop:var(--spectrum-background,var(--folio-paper-base)); background:var(--spectrum-background,var(--folio-paper-base)); color:var(--spectrum-ink,var(--folio-ink-base)); }
#portfolio-stage .folio-paper, #portfolio-stage .folio-filmstrip { transform:translate(var(--folio-drift-x,0px),var(--folio-drift-y,0px)); }
#portfolio-stage .folio-paper > section { position:relative; z-index:1; flex:1; }
#portfolio-stage .folio-header { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:start; gap:24px; min-height:50px; flex-shrink:0; text-shadow:0 0 6px var(--folio-intro-backdrop),0 0 14px var(--folio-intro-backdrop),0 0 22px color-mix(in srgb,var(--folio-intro-backdrop) 85%,transparent); }
#portfolio-stage .folio-identity { display:block; }
#portfolio-stage .folio-identity > span { display:block; }
#portfolio-stage .folio-contact { display:flex; flex-direction:column; align-items:flex-start; }
#portfolio-stage .folio-navigation { display:flex; align-items:start; justify-content:flex-end; gap:28px; }
#portfolio-stage .folio-contact-trigger { display:none; }
#portfolio-stage .folio-drawer { display:none; }
#portfolio-stage .folio-theme-control { position:relative; display:flex; align-items:center; justify-content:center; width:28px; height:28px; margin-top:-7px; flex-shrink:0; }
#portfolio-stage .folio-theme-control svg { position:absolute; width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; opacity:0; transform:rotate(-70deg) scale(.7); transition:opacity 220ms ease,transform 220ms ease; }
html[data-theme-preference=system] #portfolio-stage [data-theme-icon=system],
html[data-theme-preference=light] #portfolio-stage [data-theme-icon=light],
html[data-theme-preference=dark] #portfolio-stage [data-theme-icon=dark] { opacity:1; transform:rotate(0) scale(1); }
#portfolio-stage .folio-theme-control:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
#portfolio-stage[data-view=project] .folio-paper { padding-top:28px; padding-bottom:18px; }
#portfolio-stage .folio-project { min-height:420px; padding-top:12px; display:flex; align-items:center; width:100%; min-width:0; }
#portfolio-stage .folio-bento { --bento-height:clamp(380px,calc(100dvh - 300px),680px); --bento-mask-size:36px; width:calc(100% + 60px); margin-left:-30px; margin-right:-30px; height:var(--bento-height); display:grid; grid-template-rows:repeat(2,minmax(0,1fr)); grid-auto-flow:column; grid-auto-columns:max-content; gap:14px; padding:4px 30px 4px 30px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:none; cursor:grab; }
#portfolio-stage .folio-bento::-webkit-scrollbar { display:none; }
#portfolio-stage .folio-bento.is-dragging { cursor:grabbing; user-select:none; }
#portfolio-stage .folio-bento[data-mask-left=true][data-mask-right=true] { -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--bento-mask-size),#000 calc(100% - var(--bento-mask-size)),transparent 100%); mask-image:linear-gradient(to right,transparent 0,#000 var(--bento-mask-size),#000 calc(100% - var(--bento-mask-size)),transparent 100%); }
#portfolio-stage .folio-bento[data-mask-left=false][data-mask-right=true] { -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - var(--bento-mask-size)),transparent 100%); mask-image:linear-gradient(to right,#000 0,#000 calc(100% - var(--bento-mask-size)),transparent 100%); }
#portfolio-stage .folio-bento[data-mask-left=true][data-mask-right=false] { -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--bento-mask-size),#000 100%); mask-image:linear-gradient(to right,transparent 0,#000 var(--bento-mask-size),#000 100%); }
#portfolio-stage .folio-bento[data-mask-left=false][data-mask-right=false] { -webkit-mask-image:none; mask-image:none; }
#portfolio-stage .folio-bento:focus-visible { outline:2px solid currentColor; outline-offset:4px; border-radius:var(--folio-card-radius); }
#portfolio-stage .folio-bento-card { position:relative; height:100%; min-width:0; min-height:0; }
#portfolio-stage .folio-bento-badge { display:none; position:absolute; top:10px; left:10px; z-index:10; background:rgba(0,0,0,0.72); color:#FFFFFF; font-size:11px; font-weight:600; line-height:1; padding:5px 8px; border-radius:6px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); pointer-events:none; box-shadow:0 2px 6px rgba(0,0,0,0.3); letter-spacing:.02em; }
#portfolio-stage[data-bento-numbers=true] .folio-bento-badge { display:inline-block; }
#portfolio-stage .folio-bento-card[data-span=tall] { grid-row:1/-1; aspect-ratio:178/108; }
#portfolio-stage .folio-bento-card[data-span=feature] { grid-row:1/-1; aspect-ratio:178/108; }
#portfolio-stage .folio-bento-card[data-span=wide] { grid-row:1/-1; aspect-ratio:178/108; }
#portfolio-stage .folio-bento-card[data-span=cell] { grid-row:span 1; aspect-ratio:178/108; }
#portfolio-stage .folio-bento-image-card { display:flex; align-items:center; justify-content:center; padding:0; background:transparent; border:0; outline:0; border-radius:var(--folio-card-radius); overflow:hidden; }
#portfolio-stage .folio-bento-image-card img,
#portfolio-stage .folio-bento-image-card video { display:block; width:100%; height:100%; object-fit:cover; border-radius:var(--folio-card-radius); box-shadow:0 0 3px var(--folio-media-shadow-contact),0 0 8px -1px var(--folio-media-shadow-cast),0 0 16px -2px var(--folio-media-shadow-soft); user-select:none; pointer-events:none; }
#portfolio-stage .folio-bento-card[data-type=text] { grid-row:1/-1; aspect-ratio:1/1; }
#portfolio-stage .folio-bento-card[data-type=text][data-span=tall] { grid-row:1/-1 !important; aspect-ratio:1/1 !important; }
#portfolio-stage .folio-bento-card[data-type=text][data-span=wide],
#portfolio-stage .folio-bento-card[data-type=text][data-span=feature] { grid-row:1/-1 !important; aspect-ratio:178/108 !important; }
#portfolio-stage .folio-bento-card[data-type=text][data-span=cell] { grid-row:span 1 !important; aspect-ratio:178/108 !important; }
#portfolio-stage .folio-bento-text-card[data-span=wide] .folio-bento-hero,
#portfolio-stage .folio-bento-text-card[data-span=wide] .folio-bento-paragraph,
#portfolio-stage .folio-bento-text-card[data-span=feature] .folio-bento-hero,
#portfolio-stage .folio-bento-text-card[data-span=feature] .folio-bento-paragraph { max-width:min(600px,86%); }
#portfolio-stage .folio-bento-text-card[data-span=cell] { padding:clamp(16px,2cqw,26px) clamp(20px,2.5cqw,32px); gap:10px; }
#portfolio-stage .folio-bento-text-card[data-span=cell] .folio-bento-hero,
#portfolio-stage .folio-bento-text-card[data-span=cell] .folio-bento-paragraph { max-width:92%; }
#portfolio-stage .folio-bento-text-card { display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:16px; padding:36px clamp(28px,3.5cqw,52px); background:color-mix(in srgb,var(--project-tint-light,var(--project-tint)) 30%,var(--folio-paper-base)); border:0; outline:0; border-radius:var(--folio-card-radius); box-shadow:none; overflow-y:auto; scrollbar-width:none; box-sizing:border-box; }
#portfolio-stage .folio-bento-text-card::-webkit-scrollbar { display:none; }
#portfolio-stage .folio-bento-text-card[data-variant=dark] { background:var(--project-tint-dark); color:#F5EFE6; }
#portfolio-stage .folio-bento-text-card[data-variant=dark] .folio-bento-hero { color:#FFFFFF; }
#portfolio-stage .folio-bento-text-card[data-variant=dark] .folio-bento-paragraph { color:color-mix(in srgb,#FFFFFF 78%,transparent); }
html[data-theme=dark] #portfolio-stage .folio-bento-text-card { background:color-mix(in srgb,var(--project-tint-dark) 45%,var(--folio-paper-base)); color:var(--folio-ink-base); }
html[data-theme=dark] #portfolio-stage .folio-bento-text-card[data-variant=dark] { background:color-mix(in srgb,var(--project-tint-light) 75%,var(--folio-paper-base)); color:#23201C; }
#portfolio-stage .folio-bento-card[data-type=text].has-media { grid-row:1/-1 !important; aspect-ratio:178/108 !important; overflow:hidden; }
#portfolio-stage .folio-bento-text-card.has-media { display:flex !important; flex-direction:row !important; align-items:stretch !important; justify-content:space-between !important; text-align:left; gap:0; padding:0 !important; box-sizing:border-box; overflow:hidden; }
#portfolio-stage .folio-bento-text-card.has-media .folio-bento-text-content { flex:1 1 0%; min-width:0; display:flex; flex-direction:column; justify-content:center; text-align:left; gap:16px; padding:clamp(28px,3.4cqw,44px) clamp(34px,4cqw,52px); overflow-y:auto; scrollbar-width:none; box-sizing:border-box; }
#portfolio-stage .folio-bento-text-card.has-media .folio-bento-text-content::-webkit-scrollbar { display:none; }
#portfolio-stage .folio-bento-text-card.has-media .folio-bento-hero,
#portfolio-stage .folio-bento-text-card.has-media .folio-bento-paragraph { text-align:left; max-width:none; }
#portfolio-stage .folio-bento-text-card.has-media .folio-bento-card-media { flex:0 0 auto; height:100%; max-height:100%; aspect-ratio:3/4; overflow:hidden; border-radius:var(--folio-card-radius) 0 0 var(--folio-card-radius); background:rgba(0,0,0,0.15); box-shadow:none; }
#portfolio-stage .folio-bento-text-card[data-variant=dark].has-media .folio-bento-card-media { background:rgba(0,0,0,0.2); box-shadow:none; }
#portfolio-stage .folio-bento-text-card.has-media .folio-bento-card-media img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; border-radius:inherit; user-select:none; pointer-events:none; }
html[data-theme=dark] #portfolio-stage .folio-bento-text-card[data-variant=dark] .folio-bento-hero { color:#1A1815; }
html[data-theme=dark] #portfolio-stage .folio-bento-text-card[data-variant=dark] .folio-bento-paragraph { color:color-mix(in srgb,#1A1815 82%,transparent); }
#portfolio-stage .folio-bento-hero { font-family:'PP Kyoto',Georgia,serif; font-size:clamp(22px,2.1cqw,31px); line-height:1.15; font-weight:600; letter-spacing:-.035em; color:var(--folio-ink); margin-bottom:6px; }
#portfolio-stage .folio-bento-paragraph { font-size:14px; line-height:1.55; font-weight:400; letter-spacing:-.018em; color:var(--folio-muted); }
#portfolio-stage .folio-bento-paragraph + .folio-bento-paragraph { margin-top:10px; }
#portfolio-stage .folio-copy { grid-row:1/-1; width:clamp(400px,34cqw,520px); min-width:clamp(400px,34cqw,520px); height:100%; display:flex; flex-direction:column; justify-content:center; margin-right:48px; padding:0; box-sizing:border-box; overflow-y:auto; scrollbar-width:none; }
#portfolio-stage .folio-copy::-webkit-scrollbar { display:none; }
#portfolio-stage .folio-project-company { display:flex; align-items:center; gap:8px; color:var(--folio-muted); margin-bottom:24px; }
#portfolio-stage .folio-copy h2 { font-family:'PP Kyoto',Georgia,serif; font-size:50px; line-height:1.02; font-weight:600; letter-spacing:-.05em; margin-bottom:20px; overflow-wrap:normal; }
#portfolio-stage .folio-description { font-size:14px; line-height:1.55; font-weight:400; letter-spacing:-.018em; }
#portfolio-stage .folio-description .folio-description-p { display:block; }
#portfolio-stage .folio-description .folio-description-p + .folio-description-p { margin-top:14px; }
#portfolio-stage .folio-project-meta { margin-top:28px; border-top:1px solid var(--folio-line); padding-top:18px; display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:24px; }
#portfolio-stage .folio-project-meta dt { color:var(--folio-muted); margin-bottom:7px; }
#portfolio-stage .folio-project-meta dd { font-size:13px; line-height:1.4; margin:0; }
#portfolio-stage .folio-about { position:relative; isolation:isolate; min-height:450px; padding:36px 0 0; display:grid; grid-template-columns:minmax(0,1fr) min(30%,340px); gap:64px; align-items:end; align-content:stretch; }
#portfolio-stage .folio-about h1 { --folio-title-base:clamp(50px,9.2cqw,112px); min-width:0; font-family:'PP Neue Montreal',Arial,sans-serif; font-size:calc(var(--folio-title-base) * var(--folio-title-scale,1) * var(--folio-title-fit,1)); font-weight:400; font-style:normal; line-height:var(--folio-title-leading,1.08); letter-spacing:-.025em; font-synthesis:none; text-transform:none; }
#portfolio-stage .folio-title-line { display:block; width:max-content; white-space:nowrap; padding-right:.18em; box-sizing:border-box; }
#portfolio-stage .folio-about h1, #portfolio-stage .folio-about > div { position:relative; z-index:1; }
#portfolio-stage .folio-about { --folio-ambiguity-accent:#4A6B8A; --folio-agency-accent:#B65A43; }
html[data-theme=dark] #portfolio-stage .folio-about,
#portfolio-stage .folio-paper[data-signal-style=spectrum][data-spectrum-palette=navy] .folio-about,
#portfolio-stage .folio-paper[data-signal-style=columns][data-signal-palette=cobalt] .folio-about { --folio-ambiguity-accent:#9AB4CC; --folio-agency-accent:#D28F79; }
#portfolio-stage .folio-word { position:relative; display:inline-block; font-family:'PP Kyoto',Georgia,serif; font-size:1.05em; font-weight:900; font-style:italic; letter-spacing:-.05em; line-height:inherit; text-transform:inherit; transition:color 380ms var(--folio-hover-ease); }
#portfolio-stage .folio-word::after { content:''; position:absolute; left:0; right:0; bottom:.04em; height:.055em; background:currentColor; transform:scaleX(0); transform-origin:right center; transition:transform 380ms var(--folio-hover-ease); pointer-events:none; }
#portfolio-stage .folio-word[data-signal=ambiguity] { --folio-word-accent:var(--folio-ambiguity-accent); }
#portfolio-stage .folio-word[data-signal=agency] { --folio-word-accent:var(--folio-agency-accent); }
#portfolio-stage .folio-word:focus-visible { color:var(--folio-word-accent); outline:2px dashed currentColor; outline-offset:5px; }
#portfolio-stage .folio-word:focus-visible::after { transform:scaleX(1); transform-origin:left center; }
#portfolio-stage .folio-word[aria-pressed=true],
#portfolio-stage .folio-about[data-signal=ambiguity] .folio-word[data-signal=ambiguity],
#portfolio-stage .folio-about[data-signal=agency] .folio-word[data-signal=agency] {
  color: var(--folio-word-accent);
}
#portfolio-stage .folio-word[aria-pressed=true]::after,
#portfolio-stage .folio-about[data-signal=ambiguity] .folio-word[data-signal=ambiguity]::after,
#portfolio-stage .folio-about[data-signal=agency] .folio-word[data-signal=agency]::after {
  transform: scaleX(1);
  transform-origin: left center;
}
@media (hover:hover) {
  #portfolio-stage .folio-word:hover { color:var(--folio-word-accent); }
  #portfolio-stage .folio-word:hover::after { transform:scaleX(1); transform-origin:left center; }
}
#portfolio-stage .folio-signal { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:0; transition:opacity 700ms var(--folio-hover-ease); }
#portfolio-stage .folio-about[data-signal] .folio-signal { opacity:1; }
#portfolio-stage .folio-paper[data-signal][data-signal-style=columns] > .folio-signal { opacity:1; }
#portfolio-stage .folio-paper[data-signal][data-signal-style=spectrum] > .folio-signal { opacity:1; mask-image:linear-gradient(to bottom,#0002,#000 18%,#000 50%,#0006); }
#portfolio-stage .folio-paper[data-signal=rest][data-signal-style=spectrum] > .folio-signal { opacity:var(--spectrum-rest-opacity,.25); }
#portfolio-stage .folio-about > div { width:100%; max-width:340px; }
#portfolio-stage .folio-about-intro { position:relative; align-self:start; padding:24px; border-radius:var(--folio-card-radius); text-shadow:0 0 4px var(--folio-intro-backdrop),0 0 10px var(--folio-intro-backdrop),0 0 18px var(--folio-intro-backdrop),0 0 28px var(--folio-intro-backdrop); }
#portfolio-stage .folio-about-intro::before { content:''; position:absolute; inset:-48px -64px; z-index:-1; pointer-events:none; background:radial-gradient(ellipse closest-side at 46% 50%,var(--folio-intro-backdrop) 0%,var(--folio-intro-backdrop) 54%,color-mix(in srgb,var(--folio-intro-backdrop) 82%,transparent) 72%,color-mix(in srgb,var(--folio-intro-backdrop) 35%,transparent) 88%,transparent 100%); filter:blur(16px); opacity:.95; transition:opacity 500ms var(--folio-hover-ease); }
#portfolio-stage .folio-about[data-signal=ambiguity] .folio-about-intro::before,
#portfolio-stage .folio-about[data-signal=agency] .folio-about-intro::before { opacity:1; }
#portfolio-stage .folio-about p { font-size:17px; line-height:1.6; margin:18px 0; }
#portfolio-stage .folio-about-intro > p:first-child { margin-top:0; }
#portfolio-stage .folio-about .folio-bio { line-height:1.45; margin:12px 0; }
#portfolio-stage .folio-about .folio-mono { font-size:11px; }
#portfolio-stage .folio-about-intro > a { display:inline-block; margin-top:12px; }
#portfolio-stage .folio-filmstrip { margin-top:28px; flex-shrink:0; }
#portfolio-stage .folio-strip-heading { display:flex; justify-content:space-between; color:var(--folio-frame-ink); margin-bottom:16px; gap:20px; }
#portfolio-stage .folio-thumbnails { display:grid; grid-template-columns:repeat(var(--folio-thumb-count, 4),minmax(0,1fr)); gap:16px; align-items:stretch; }
#portfolio-stage .folio-thumb { display:flex; flex-direction:column; min-width:0; width:100%; height:100%; color:var(--folio-frame-ink); }
#portfolio-stage .folio-thumb-picture { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:stretch; gap:12px; padding:16px 16px 0; height:100%; box-sizing:border-box; background:var(--folio-thumb-bg); outline:2px solid transparent; outline-offset:-2px; border-radius:var(--folio-card-radius); overflow:clip; transition:transform 380ms var(--folio-hover-ease),outline-color 300ms var(--folio-hover-ease); }
#portfolio-stage .folio-thumb-picture img, #portfolio-stage .folio-thumb-picture video { align-self:end; width:100%; height:auto; aspect-ratio:2/1; display:block; object-fit:contain; border-radius:4px 4px 0 0; box-shadow:0 0 3px var(--folio-media-shadow-contact),0 0 8px -1px var(--folio-media-shadow-cast),0 0 16px -2px var(--folio-media-shadow-soft); }
#portfolio-stage .folio-thumb-label { align-self:stretch; display:flex; padding:0 0 16px; color:var(--folio-frame-ink); font-size:11px; line-height:1.4; }
#portfolio-stage .folio-thumb:hover .folio-thumb-picture { transform:translateY(-4px); }
#portfolio-stage .folio-thumb[aria-pressed=true] .folio-thumb-picture { outline-color:var(--folio-frame-ink); box-shadow:0 0 0 4px var(--folio-frame) inset; }
#portfolio-stage .folio-thumb-title, #portfolio-stage .folio-thumb-caption > span:first-child { display:block; font-family:'PP Kyoto',Georgia,serif; font-size:15px; line-height:1.18; font-weight:600; letter-spacing:-.02em; text-transform:none; }
#portfolio-stage .folio-thumb[aria-pressed=true] .folio-thumb-title, #portfolio-stage .folio-thumb[aria-pressed=true] .folio-thumb-caption > span:first-child { text-decoration:underline; text-underline-offset:4px; }
#portfolio-stage .folio-thumb-year { display:none; }
#portfolio-stage .folio-thumb-name { display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; gap:8px; min-width:0; width:100%; }
#portfolio-stage .folio-thumb-caption { min-width:0; }
#portfolio-stage .folio-brand-mark { display:inline-block; width:14px; height:12px; margin-top:1px; flex-shrink:0; background-color:currentColor; mask-position:center; mask-size:contain; mask-repeat:no-repeat; }
#portfolio-stage .folio-brand-mark[data-brand=rippling] { mask-image:url('../assets/images/rippling-mark-monochrome.svg'); }
#portfolio-stage .folio-brand-mark[data-brand=airtable] { mask-image:url('../assets/images/airtable-mark-monochrome.svg'); }
#portfolio-stage .folio-brand-mark[data-brand=salesforce] { width:15px; mask-image:url('../assets/images/salesforce-cloud-monochrome.svg'); }
#portfolio-stage .folio-bio-brand,
#portfolio-stage .folio-bio-brand:hover,
#portfolio-stage .folio-bio-brand:focus {
  text-decoration:none !important;
}
#portfolio-stage .folio-bio-brand {
  display:inline-flex;
  align-items:center;
  vertical-align:baseline;
  white-space:nowrap;
  font-family:'PP Kyoto',Georgia,serif;
  font-weight:600;
  letter-spacing:-.02em;
  padding-right:1.5px;
}
#portfolio-stage .folio-bio-brand > span:last-child {
  text-decoration:none !important;
  border-bottom:1px solid color-mix(in srgb,currentColor 50%,transparent);
  padding-bottom:1px;
  line-height:1.15;
  transition:border-color 150ms ease;
}
#portfolio-stage .folio-bio-brand:hover > span:last-child,
#portfolio-stage .folio-bio-brand:focus-visible > span:last-child {
  border-bottom-color:currentColor;
}
#portfolio-stage .folio-bio-brand .folio-brand-mark {
  width:15px;
  height:13px;
  margin:0 5px 0 2px;
  vertical-align:-1px;
  color:var(--folio-muted);
  transition:color 150ms ease;
}
#portfolio-stage .folio-bio-brand:hover .folio-brand-mark,
#portfolio-stage .folio-bio-brand:focus-visible .folio-brand-mark {
  color:var(--folio-ink);
}
#portfolio-stage .folio-bio-brand .folio-brand-mark[data-brand=salesforce] {
  width:16px;
}
#portfolio-stage .folio-thumb-name .folio-brand-mark { margin-top:0; color:var(--folio-frame-muted); }
#portfolio-stage .folio-project-company .folio-brand-mark { margin-top:0; color:var(--folio-ink); }
#portfolio-stage .folio-transition .folio-bento-card { animation:folio-image-in 360ms 80ms ease both; }
#portfolio-stage .folio-transition .folio-copy { animation:folio-copy-in 340ms ease both; }
#portfolio-stage .folio-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
#portfolio-stage[data-layout=below] .folio-project { grid-template-columns:1fr; gap:24px; }
#portfolio-stage[data-layout=below] .folio-copy { display:grid; grid-template-columns:.8fr 1fr 1fr; column-gap:32px; align-items:start; }
#portfolio-stage[data-layout=below] .folio-project-company { grid-column:1/-1; margin-bottom:10px; }
#portfolio-stage[data-layout=below] .folio-copy h2 { font-size:42px; }
#portfolio-stage[data-layout=below] .folio-project-meta { margin-top:0; border:0; padding-top:0; }
@keyframes folio-image-in { from { opacity:0; transform:translateX(12px); } to { opacity:1; transform:none; } }
@keyframes folio-copy-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@container (max-width:960px) {
  #portfolio-stage .folio-about { grid-template-columns:1fr; gap:0; }
  #portfolio-stage .folio-about h1, #portfolio-stage .folio-about > div { grid-column:1/-1; grid-row:1; }
  #portfolio-stage .folio-about h1 { align-self:end; z-index:1; }
  #portfolio-stage .folio-about > div { justify-self:end; align-self:start; width:min(100%,340px); max-width:340px; z-index:2; }
  #portfolio-stage .folio-copy { width:clamp(320px,36cqw,420px); min-width:clamp(320px,36cqw,420px); margin-right:32px; }
  #portfolio-stage .folio-copy h2 { font-size:40px; }
  #portfolio-stage .folio-description { font-size:13px; }
  #portfolio-stage .folio-bento { --bento-height:clamp(340px,calc(100dvh - 320px),560px); gap:10px; }
  #portfolio-stage .folio-thumbnails { gap:12px; }
  #portfolio-stage .folio-thumb-picture { grid-template-columns:1fr; grid-template-rows:1fr auto; gap:10px; padding:12px 12px 0; }
  #portfolio-stage .folio-thumb-label { padding-bottom:0; }
  #portfolio-stage .folio-thumb-name { justify-content:flex-start; gap:6px; }
}
@container (max-width:570px) {
  #portfolio-stage .folio-paper { padding:22px 20px 26px; }
  #portfolio-stage:not([data-view=project]) .folio-paper { min-height:80dvh; min-height:80vh; }
  #portfolio-stage .folio-header { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px 24px; }
  #portfolio-stage .folio-identity .folio-location { display:none; }
  #portfolio-stage .folio-contact { display:none; }
  #portfolio-stage .folio-desktop-resume { display:none !important; }
  #portfolio-stage #folio-about-button { display:none !important; }
  #portfolio-stage .folio-contact-trigger { display:inline-flex; }
  #portfolio-stage .folio-navigation { max-width:100%; margin-left:auto; flex-wrap:wrap; justify-content:flex-end; gap:10px 16px; align-items:center; }
  #portfolio-stage .folio-navigation button, #portfolio-stage .folio-navigation a { min-height:24px; display:flex; align-items:center; }
  #portfolio-stage .folio-theme-control { margin-top:0; }
  #portfolio-stage .folio-drawer {
    display:block;
    position:fixed;
    inset:0;
    z-index:1000;
    pointer-events:none;
    visibility:hidden;
    transition:visibility 260ms ease;
  }
  #portfolio-stage .folio-drawer[data-state=open] {
    pointer-events:auto;
    visibility:visible;
  }
  #portfolio-stage .folio-drawer-backdrop {
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.46);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    opacity:0;
    transition:opacity 240ms ease;
  }
  html[data-theme=dark] #portfolio-stage .folio-drawer-backdrop {
    background:rgba(0,0,0,0.68);
  }
  #portfolio-stage .folio-drawer[data-state=open] .folio-drawer-backdrop {
    opacity:1;
  }
  #portfolio-stage .folio-drawer-sheet {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    background:var(--folio-paper-base);
    color:var(--folio-ink-base);
    border-top:1px solid var(--folio-line-base);
    border-radius:20px 20px 0 0;
    padding:14px 0 calc(24px + env(safe-area-inset-bottom, 0px));
    box-shadow:0 -8px 36px rgba(0,0,0,0.2);
    transform:translateY(100%);
    transition:transform 260ms cubic-bezier(0.16,1,0.3,1);
    will-change:transform;
    max-width:540px;
    margin:0 auto;
    overflow:hidden;
  }
  #portfolio-stage .folio-drawer[data-state=open] .folio-drawer-sheet {
    transform:translateY(0);
  }
  #portfolio-stage .folio-drawer-grabber {
    width:36px;
    height:4px;
    border-radius:2px;
    background:var(--folio-line-base);
    margin:0 auto 14px;
    opacity:0.8;
  }
  #portfolio-stage .folio-drawer-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 20px 14px 20px;
    border-bottom:1px solid color-mix(in srgb,var(--folio-line-base) 70%,transparent);
  }
  #portfolio-stage .folio-drawer-title {
    font-size:11px;
    letter-spacing:-0.025em;
    text-transform:uppercase;
    color:var(--folio-muted-base);
  }
  #portfolio-stage .folio-drawer-close {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    font-size:14px;
    color:var(--folio-muted-base);
    border-radius:50%;
    cursor:pointer;
    background:none;
    border:none;
    padding:0;
    transition:color 150ms ease,background-color 150ms ease;
  }
  #portfolio-stage .folio-drawer-close:hover,
  #portfolio-stage .folio-drawer-close:active {
    color:var(--folio-ink-base);
    background:var(--folio-thumb-bg);
  }
  #portfolio-stage .folio-drawer-nav {
    display:flex;
    flex-direction:column;
    padding-top:0;
  }
  #portfolio-stage .folio-drawer-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 20px;
    border-bottom:1px solid color-mix(in srgb,var(--folio-line-base) 70%,transparent);
    color:var(--folio-ink-base);
    text-decoration:none !important;
    border-radius:0;
    transition:background-color 150ms ease,color 150ms ease;
  }
  #portfolio-stage .folio-drawer-row:last-child {
    border-bottom:none;
  }
  #portfolio-stage .folio-drawer-row:hover,
  #portfolio-stage .folio-drawer-row:active {
    background:var(--folio-thumb-bg);
  }
  #portfolio-stage .folio-drawer-label {
    font-size:13px;
    font-weight:600;
    letter-spacing:-0.02em;
  }
  #portfolio-stage .folio-drawer-meta {
    font-size:11px;
    color:var(--folio-muted-base);
  }
  #portfolio-stage[data-view=project] {
    height:auto !important;
    min-height:100dvh;
    overflow-y:visible !important;
  }
  #portfolio-stage[data-view=project] .folio-paper {
    overflow:visible !important;
    flex:0 0 auto !important;
    height:auto !important;
    min-height:auto !important;
    padding-top:22px;
    padding-bottom:28px;
  }
  #portfolio-stage[data-view=project] .folio-header {
    margin-bottom:44px;
  }
  #portfolio-stage[data-view=project] .folio-project {
    min-height:auto !important;
    height:auto !important;
    padding-top:10px;
    display:block !important;
  }
  #portfolio-stage[data-view=project] .folio-copy {
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:auto !important;
    margin-right:0 !important;
    padding:0 0 28px !important;
    display:block !important;
    overflow:visible !important;
  }
  #portfolio-stage[data-view=project] .folio-copy h2 {
    font-size:34px;
    margin-bottom:12px;
    line-height:1.05;
  }
  #portfolio-stage[data-view=project] .folio-project-company {
    margin-bottom:12px;
    font-size:11px;
  }
  #portfolio-stage[data-view=project] .folio-description {
    font-size:14px;
    line-height:1.55;
  }
  #portfolio-stage[data-view=project] .folio-project-meta {
    display:grid;
    grid-template-columns:1fr 1fr;
    margin-top:20px;
    padding-top:16px;
    gap:16px;
    border-top:1px solid var(--folio-line);
  }
  #portfolio-stage[data-view=project] .folio-bento {
    display:flex !important;
    flex-direction:column !important;
    gap:16px !important;
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
    cursor:default !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;
  }
  #portfolio-stage[data-view=project] .folio-bento-card {
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:auto !important;
    border-radius:var(--folio-card-radius);
    box-sizing:border-box;
    overflow:hidden;
  }
  #portfolio-stage[data-view=project] .folio-bento-image-card {
    width:100% !important;
    height:auto !important;
    aspect-ratio:auto !important;
    background:transparent !important;
    overflow:hidden;
    padding:0 !important;
    display:block !important;
  }
  #portfolio-stage[data-view=project] .folio-bento-image-card img,
  #portfolio-stage[data-view=project] .folio-bento-image-card video {
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    display:block !important;
    object-fit:contain !important;
    border-radius:var(--folio-card-radius);
    box-shadow:0 0 2px var(--folio-media-shadow-contact),0 0 5px -1px var(--folio-media-shadow-cast),0 0 10px -2px var(--folio-media-shadow-soft);
    pointer-events:auto;
  }
  #portfolio-stage[data-view=project] .folio-bento-card[data-type=text] {
    aspect-ratio:1/1 !important;
    width:100% !important;
    height:auto !important;
  }
  #portfolio-stage[data-view=project] .folio-bento-text-card {
    aspect-ratio:1/1 !important;
    width:100% !important;
    height:auto !important;
    padding:clamp(24px,6cqw,36px) clamp(20px,5cqw,28px) !important;
    gap:14px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;
    text-align:center !important;
    border-radius:var(--folio-card-radius);
    box-sizing:border-box;
    overflow-y:auto;
    scrollbar-width:none;
  }
  #portfolio-stage[data-view=project] .folio-bento-text-card::-webkit-scrollbar {
    display:none;
  }
  #portfolio-stage[data-view=project] .folio-bento-text-card .folio-bento-hero {
    font-size:clamp(18px,5cqw,22px);
    line-height:1.25;
    max-width:100% !important;
    margin-bottom:0;
  }
  #portfolio-stage[data-view=project] .folio-bento-text-card .folio-bento-paragraph {
    font-size:13.5px;
    line-height:1.55;
    max-width:100% !important;
  }
  #portfolio-stage[data-view=project] .folio-bento-card[data-type=text].has-media {
    overflow:hidden;
    aspect-ratio:auto !important;
    height:auto !important;
  }
  #portfolio-stage[data-view=project] .folio-bento-text-card.has-media {
    aspect-ratio:auto !important;
    height:auto !important;
    min-height:auto !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    padding:0 !important;
    overflow:visible !important;
  }
  #portfolio-stage[data-view=project] .folio-bento-text-card.has-media .folio-bento-card-media {
    width:100% !important;
    height:auto !important;
    aspect-ratio:16/10 !important;
    flex:0 0 auto !important;
    border-radius:var(--folio-card-radius) var(--folio-card-radius) 0 0 !important;
    overflow:hidden !important;
  }
  #portfolio-stage[data-view=project] .folio-bento-text-card.has-media .folio-bento-card-media img {
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    border-radius:inherit !important;
  }
  #portfolio-stage[data-view=project] .folio-bento-text-card.has-media .folio-bento-text-content {
    flex:1 1 auto !important;
    padding:24px 22px 28px !important;
    gap:12px !important;
    text-align:left !important;
    overflow:visible !important;
  }
  #portfolio-stage[data-view=project] .folio-bento-text-card.has-media .folio-bento-hero {
    text-align:left !important;
    font-size:20px !important;
    line-height:1.25 !important;
  }
  #portfolio-stage[data-view=project] .folio-bento-text-card.has-media .folio-bento-paragraph {
    text-align:left !important;
    font-size:14px !important;
    line-height:1.55 !important;
  }
  #portfolio-stage .folio-about { display:flex; flex-direction:column; justify-content:space-between; padding-top:24px; gap:24px; min-height:auto; }
  #portfolio-stage .folio-about h1 { width:100%; max-width:100%; min-width:0; --folio-title-base:clamp(34px,calc(12cqw - 4px),52px); }
  #portfolio-stage .folio-about > div { width:100%; max-width:100%; }
  #portfolio-stage .folio-about-intro { margin-top:auto; padding:0; }
  #portfolio-stage .folio-about-intro > p:last-child { margin-bottom:0; }
  #portfolio-stage .folio-about > .folio-signal { height:100%; }
  #portfolio-stage #folio-strip-state { display:none; }
  #portfolio-stage .folio-filmstrip { margin-top:20px; }
  #portfolio-stage .folio-strip-heading { margin-bottom:12px; }
  #portfolio-stage .folio-thumbnails { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  #portfolio-stage .folio-thumb-picture {
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:stretch;
    gap:14px;
    padding:14px 14px 0;
    min-height:auto;
    height:118px;
    aspect-ratio:auto;
  }
  #portfolio-stage .folio-thumb-label { padding:0; margin:0; width:100%; flex:0 0 auto; }
  #portfolio-stage .folio-thumb-name { display:flex; flex-direction:row; align-items:center; gap:6px; width:100%; margin:0; }
  #portfolio-stage .folio-thumb-title {
    font-size:13.5px;
    line-height:1.15;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #portfolio-stage .folio-thumb-picture img, #portfolio-stage .folio-thumb-picture video {
    flex:1 1 auto;
    min-height:0;
    width:100%;
    height:100%;
    max-height:none;
    aspect-ratio:auto;
    object-fit:cover;
    object-position:top center;
    border-radius:4px 4px 0 0;
    box-shadow:0 0 2px var(--folio-media-shadow-contact),0 0 5px -1px var(--folio-media-shadow-cast);
    align-self:stretch;
    margin:0;
  }
  #portfolio-stage[data-layout=below] .folio-copy { display:block; }
  #portfolio-stage[data-layout=below] .folio-project-meta { margin-top:24px; }
}
@media (max-width:600px) {
  #portfolio-stage { padding:16px; }
  #portfolio-stage:not([data-view=project]) .folio-paper { min-height:80dvh; min-height:80vh; }
  #portfolio-stage .folio-identity .folio-location { display:none; }
  #portfolio-stage .folio-desktop-resume { display:none !important; }
  #portfolio-stage #folio-about-button { display:none !important; }
  #portfolio-stage .folio-contact-trigger { display:inline-flex; }
}
@media (prefers-reduced-motion:reduce) {
  #portfolio-stage *, #portfolio-stage *::before, #portfolio-stage *::after { animation:none !important; transition:none !important; }
}