/* A readable project index: one project, one purpose, one clear next step. */
.topbar{position:relative!important;backdrop-filter:none!important;background:var(--brand-paper)!important;min-height:84px;padding-inline:5%;border-bottom:1px solid var(--brand-line)!important}
.topbar .wordmark-name{font-size:1.15rem;font-weight:600;letter-spacing:-.035em}.topbar .lang-btn{font-size:.8125rem}.topbar .nav a{font-size:.9375rem}
body.page-mode #main{padding-top:0}.character-story-home{height:clamp(720px,calc(100svh - 84px),920px);overflow:hidden}
.editorial-portfolio{--space:clamp(4rem,7vw,7rem);font-size:1.0625rem;line-height:1.7}
.editorial-portfolio .bot-container{width:89.4%;max-width:1280px;margin-inline:auto}
.editorial-portfolio h2{font-family:var(--font-body);font-size:clamp(2.25rem,4.2vw,4.25rem);font-weight:500;line-height:1.12;letter-spacing:-.035em;text-wrap:balance}
.editorial-portfolio h2 em{font-family:var(--font-display);font-weight:400}
.editorial-portfolio h3{font-family:var(--font-body);letter-spacing:-.025em;line-height:1.2;font-weight:500;text-wrap:balance}
.folio-overline{font-family:var(--font-label);font-weight:500;font-size:.875rem;letter-spacing:.12em;text-transform:uppercase;line-height:1.7;color:var(--brand-secondary)}
.folio-link{display:inline-block;font-size:1rem;font-weight:500;border-bottom:1px solid currentColor;padding:.45rem 0;line-height:1.5;transition:color .2s}.folio-link:hover{color:var(--brand-muted)}
.editorial-portfolio a:focus-visible{outline:2px solid var(--brand-ink);outline-offset:6px}
.folio-intro{padding:2.5rem 0;display:flex;justify-content:space-between;align-items:center;gap:2rem;border-bottom:1px solid var(--brand-line)}
.folio-intro>p{font-size:1.125rem;line-height:1.6;max-width:39ch;margin:0}.folio-intro .folio-link{white-space:nowrap;font-size:.9375rem}
.folio-work{padding:4rem 0 5.5rem}
.folio-section-head{display:grid;grid-template-columns:1.25fr 1fr;gap:9%;align-items:end;margin-bottom:2.5rem}
.folio-section-head h2{margin-top:.9rem}.folio-section-head>p{font-size:1rem;max-width:46ch;color:var(--brand-secondary);line-height:1.7;margin:0}
.folio-section-head>.folio-link{justify-self:end}
.folio-projects{display:grid;gap:0}
.folio-project{display:grid;grid-template-columns:.95fr 1.25fr;gap:7%;align-items:center;padding:3rem 0;border-top:1px solid var(--brand-line)}
.folio-project-copy{min-width:0}.folio-project-top{display:flex;align-items:center;gap:1rem;font-family:var(--font-mono);font-size:.8125rem;line-height:1.6;color:var(--brand-secondary);margin:0 0 1.2rem!important}
.folio-project-top>span:first-child{font-size:1rem;color:var(--brand-ink)}
.folio-concept{font-size:.8125rem;line-height:1.6;color:var(--brand-secondary);margin:0 0 .7rem!important}
.folio-project h3{font-size:clamp(1.7rem,2.5vw,2.5rem);margin:0 0 1.1rem}.folio-project h3 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.folio-project-description{font-size:1.0625rem;line-height:1.7;color:var(--brand-secondary);max-width:47ch}
.folio-tags{font-family:var(--font-body);font-size:.875rem!important;line-height:1.65;margin:1rem 0 1.4rem!important;color:var(--brand-secondary)}
.folio-project-visual.bot-preview{border-radius:0;aspect-ratio:1.17;min-height:0;display:grid;place-items:center;overflow:hidden;background:var(--brand-nude);padding:2.2rem;transition:background .3s;isolation:isolate}
.folio-project--gulf .folio-project-visual{background:var(--brand-nude)}.folio-project--piece .folio-project-visual{background:var(--brand-nude)}
.folio-project .bot-mock{width:100%;max-width:510px;min-height:0;margin:0;padding:1.5rem 1.75rem 1.8rem;background:var(--brand-paper);transform:none;box-shadow:none;border-radius:0;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.folio-preview-bar{display:flex;justify-content:space-between;gap:1rem;padding-bottom:.8rem;margin-bottom:1.7rem;border-bottom:1px solid var(--brand-line);font-size:.75rem;color:var(--brand-secondary)}
.folio-project .bot-mock-brand{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.065em;line-height:1.6;display:block}
.folio-project .bot-mock>strong{display:block;font-size:clamp(2rem,3vw,3rem);line-height:1.12;margin:1rem 0 1.5rem;font-family:var(--font-display);font-weight:500;letter-spacing:-.015em;max-width:14ch}
.folio-project .bot-mock-steps>span{font-size:.875rem;padding:.6rem 0;line-height:1.5}.folio-project .bot-mock-steps small{font-size:.75rem;color:var(--brand-secondary)}
@media(hover:hover){.folio-project-visual:hover .bot-mock{transform:translateY(-5px)}}
.folio-library{background:var(--brand-nude);color:var(--brand-ink);padding:4.5rem 0}
.folio-library>.bot-container{display:grid;grid-template-columns:.95fr 1.25fr;gap:7%;align-items:start}
.folio-library h2{font-family:var(--font-display);font-size:clamp(3.5rem,6vw,6rem);font-weight:500;margin:1rem 0;line-height:1.05;letter-spacing:-.04em}.folio-library h2 span{color:var(--brand-ink)}
.folio-library h3{font-size:clamp(1.7rem,2.4vw,2.5rem);margin:0 0 1rem}.folio-library-copy>p{font-size:1.0625rem;line-height:1.75;max-width:54ch;color:var(--brand-secondary)}
.folio-process{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;padding:0;margin:1.75rem 0;border-top:1px solid var(--brand-line)}
.folio-process li{display:flex;flex-direction:column;gap:.45rem;font-size:.875rem;padding:1rem .6rem 0 0}.folio-process small{font-family:var(--font-mono);font-size:.75rem;color:var(--brand-secondary)}
.folio-expertise{padding:5rem 0}.folio-services{border-top:1px solid var(--brand-line)}
.folio-services>a{display:grid;grid-template-columns:2rem 1fr 1.1fr;gap:2rem;align-items:baseline;padding:1.7rem 0;border-bottom:1px solid var(--brand-line)}
.folio-services>a:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}.folio-services>a>span{font-family:var(--font-mono);font-size:.8125rem;color:var(--brand-secondary)}
.folio-services h3{font-size:clamp(1.4rem,2.1vw,2rem);margin:0}.folio-services p{font-size:1.0625rem;line-height:1.7;color:var(--brand-secondary);max-width:43ch;margin:0}
.editorial-portfolio .bot-about{padding:1rem 0 5rem;gap:9%;grid-template-columns:.85fr 1.15fr;align-items:center}
.editorial-portfolio .bot-about figure{max-width:350px}.editorial-portfolio .bot-about img{border-radius:0;aspect-ratio:4/5;filter:none}
.editorial-portfolio .bot-about h2{margin-bottom:1.5rem}.editorial-portfolio .bot-about p:not(.folio-overline){font-size:1.0625rem;line-height:1.75;max-width:53ch}.editorial-portfolio .bot-about figcaption{font-size:.8125rem;letter-spacing:0}
.folio-contact{border-top:1px solid var(--brand-line);padding:3.5rem 0 5rem;display:grid;grid-template-columns:1fr auto;gap:1rem 2rem;align-items:end}
.folio-contact>.folio-overline{grid-column:1/-1}.folio-contact h2{font-size:clamp(2.4rem,4.5vw,4.5rem)}.folio-contact>.folio-link{margin-bottom:.15rem}
.editorial-portfolio[dir=rtl] h2,.editorial-portfolio[dir=rtl] h3{letter-spacing:0;line-height:1.4}
@media(max-width:1000px){.folio-project{gap:5%;grid-template-columns:1fr 1fr}.folio-project-visual.bot-preview{padding:1.5rem;aspect-ratio:auto;min-height:350px}.folio-project .bot-mock{padding:1.1rem}.folio-services>a{gap:1.2rem}.folio-process{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){
 .topbar{min-height:72px;padding-inline:6%;gap:1rem}.topbar .wordmark-name{font-size:1rem}.character-story-home{height:calc(550px + min(98vw,460px))}.editorial-portfolio .bot-container{width:88%}
 .editorial-portfolio h2{font-size:clamp(2.1rem,8vw,3rem)}.folio-overline{font-size:.75rem}
 .folio-intro{padding:1.8rem 0;display:block}.folio-intro>p{font-size:1.0625rem}.folio-intro>.folio-link{margin-top:1rem}
 .folio-work{padding:2.5rem 0}.folio-section-head{grid-template-columns:1fr;gap:1rem;margin-bottom:1.5rem}.folio-section-head>.folio-link{justify-self:start}
 .folio-project{grid-template-columns:1fr;gap:1.6rem;padding:2rem 0}.folio-project h3{font-size:1.8rem}.folio-project-top{margin-bottom:.75rem!important}.folio-project-description{max-width:none}
 .folio-project-visual.bot-preview{min-height:0;padding:1.5rem;aspect-ratio:auto}.folio-project .bot-mock{padding:1.2rem 1.4rem;max-width:none}.folio-project .bot-mock>strong{font-size:2.25rem}.folio-preview-bar{margin-bottom:1.3rem}
 .folio-library{padding:3rem 0}.folio-library>.bot-container{grid-template-columns:1fr;gap:1.5rem}.folio-library h2{font-size:3.6rem;margin:.7rem 0}.folio-library h3{font-size:1.8rem}
 .folio-expertise{padding:3rem 0}.folio-services>a{grid-template-columns:1.4rem 1fr;gap:.7rem}.folio-services h3{font-size:1.5rem}.folio-services p{grid-column:2}
 .editorial-portfolio .bot-about{grid-template-columns:1fr;gap:2rem;padding:1rem 0 3rem}.editorial-portfolio .bot-about figure{max-width:280px;margin:0}
 .folio-contact{grid-template-columns:1fr;padding:2.5rem 0 3rem}.folio-contact>.folio-link{justify-self:start}
}
@media(prefers-reduced-motion:reduce){.folio-project .bot-mock,.folio-project-visual,.folio-link{transition:none}}
/* A visible portfolio index: explicit categories, then the work behind them. */
.folio-index{position:sticky;top:0;z-index:20;background:var(--brand-paper);border-block:1px solid var(--brand-line)}
.folio-index>.bot-container{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.folio-index a{min-height:78px;display:flex;align-items:center;gap:.65rem;padding:.9rem .8rem;border-inline-end:1px solid var(--brand-line);font-size:.9375rem;line-height:1.35;position:relative}
.folio-index a:first-child{border-inline-start:1px solid var(--brand-line)}
.folio-index-number{font: .6875rem var(--font-mono);color:var(--brand-muted)}
.folio-index-arrow{margin-inline-start:auto;opacity:.45}
.folio-index a::after{content:'';position:absolute;bottom:0;inset-inline:0;height:3px;background:var(--brand-ink);transform:scaleX(0);transform-origin:center;transition:transform .25s}
.folio-index a[aria-current=location]::after,.folio-index a:hover::after{transform:scaleX(1)}
.folio-index a:nth-child(1):hover,.folio-index a:nth-child(1)[aria-current]{background:var(--brand-nude)}
.folio-index a:nth-child(2):hover,.folio-index a:nth-child(2)[aria-current]{background:var(--brand-nude)}
.folio-index a:nth-child(3):hover,.folio-index a:nth-child(3)[aria-current]{background:var(--brand-nude)}
.folio-index a:nth-child(4):hover,.folio-index a:nth-child(4)[aria-current]{background:var(--brand-nude)}
.folio-index a:nth-child(5):hover,.folio-index a:nth-child(5)[aria-current]{background:var(--brand-nude)}
.editorial-portfolio section[id]{scroll-margin-top:108px}
.folio-project-top{align-items:stretch;margin-bottom:1.3rem!important}
.folio-project-top>span:first-child{display:grid;place-items:center;font-size:.75rem;min-width:2rem}
.folio-sector{display:block;background:var(--brand-nude);padding:.55rem .75rem;color:var(--brand-ink);font:500 1rem/1.45 var(--font-body)}
.folio-project--gulf .folio-sector{background:var(--brand-nude)}.folio-project--piece .folio-sector{background:var(--brand-nude)}
.folio-project-meta{margin:1.4rem 0;display:grid;gap:.85rem}
.folio-project-meta>div{display:grid;grid-template-columns:5.5rem 1fr;gap:.65rem}
.folio-project-meta dt{font:.6875rem/1.7 var(--font-mono);text-transform:uppercase;color:var(--brand-muted);padding-top:.12rem}
.folio-project-meta dd{font-size:.9375rem;line-height:1.55;margin:0;color:var(--brand-ink)}
.folio-section-head .folio-overline,.folio-library .folio-overline,.bot-about .folio-overline,.folio-contact .folio-overline{color:var(--brand-ink);font-weight:500}
@media(max-width:1000px){.folio-index a{font-size:.8125rem;padding:.75rem .55rem;gap:.4rem}.folio-index-arrow{display:none}}
@media(max-width:700px){
 .folio-index>.bot-container{width:100%;grid-template-columns:repeat(6,minmax(0,1fr))}
 .folio-index a{grid-column:span 2;min-height:46px;padding:.6rem .65rem;font-size:.75rem;gap:.35rem}
 .folio-index a:nth-child(n+4){grid-column:span 3;border-top:1px solid var(--brand-line)}
 .folio-index a:first-child{border-inline-start:0}.folio-index a:nth-child(3),.folio-index a:last-child{border-inline-end:0}
 .folio-index-number{font-size:.6rem}.editorial-portfolio section[id]{scroll-margin-top:140px}
 .folio-sector{font-size:.9375rem}.folio-project-meta>div{grid-template-columns:4.8rem 1fr}
}
@media(prefers-reduced-motion:reduce){.folio-index a::after{transition:none}}