/* Selected work comes into view earlier; supporting information stays legible. */
.identity-hero{padding-top:.5rem;padding-bottom:1.8rem}
.identity-meta{font-size:.875rem}
.bilingual-name{margin:1.15rem 0 1.5rem;gap:8%}
.latin-name{font-size:clamp(4.5rem,10.5vw,9rem)}
.arabic-fullname{font-size:clamp(3.4rem,8vw,7rem)}
.identity-intro>p{font-size:clamp(1.35rem,2vw,1.85rem)}
.identity-intro>div>p{font-size:1rem;max-width:490px}
.intro-links{font-size:.9rem;margin-top:.5rem}
.curation{padding-top:1rem}
.curation-heading{margin-bottom:1.3rem}
.curation-heading h2{font-size:1.05rem}
.selected-stage,.selected-digital{margin-top:2.5rem}
.selected-caption>.eyebrow{font-size:.8rem;letter-spacing:.035em}
.selected-caption>p:not(.eyebrow){font-size:1rem;line-height:1.6;max-width:470px}
.case-action{font-size:.95rem;min-height:44px;display:inline-flex;align-items:center;gap:.5rem;margin-top:.5rem}
.stage-window{aspect-ratio:1.5}
.stage-arabic{font-size:clamp(1.5rem,2.7vw,2.65rem)}
.identity-window{aspect-ratio:1400/802}
.digital-window{aspect-ratio:7/6;padding:0;background:#ebebeb}
.digital-window>img{width:100%;height:100%;object-fit:contain}
.archive-content .card-caption h3{font-size:1.15rem}
.archive-content .card-caption p{font-size:.9rem}
.archive-drawer summary small,.archive-close{font-size:.9rem}
.case-jump{font-size:.9rem;padding-block:.55rem}
.case-jump a{min-height:44px;display:inline-flex;align-items:center}
.back-link,.text-action{font-size:.95rem;min-height:44px;display:inline-flex;align-items:center}
.opening-credits dt,dt{font-size:.78rem}
.opening-credits dd,dd{font-size:.95rem}
.sfbt-opening{padding-bottom:2rem}
.sfbt-opening .back-link{margin-bottom:1rem}
.sfbt-opening-art{max-width:365px;justify-self:end}
.sfbt-opening-grid{align-items:center}
.sfbt-deck{font-size:1rem}
.sfbt-opening h1{font-size:clamp(4.8rem,8vw,7rem)}
.sfbt-opening h1>span{font-size:clamp(1.8rem,3vw,2.7rem)}
.campaign-tile>span,.world-stills figcaption,.open-video{font-size:.875rem}
.clip-choice>span:not(.clip-indicator){font-size:.95rem}
.clip-choice small{font-size:.75rem}
.player-caption{font-size:.9rem}
.system-section{padding:3rem 0;margin-bottom:4rem}
.system-heading>p,.system-copy>p:not(.eyebrow){font-size:1rem}
.design-controls button{font-size:.95rem}
.design-controls button>span{font-size:.75rem}
.design-key{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:1.1rem}
.design-key li{display:flex;align-items:start;gap:.9rem}
.design-key li>span,.detail-marker{display:grid;place-items:center;flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--paper);font-size:.8rem}
.design-key strong{font-weight:400;color:var(--ink);font-size:1rem}
.design-key p{font-size:.9rem;line-height:1.5;color:var(--muted);margin-top:.2rem}
.annotated-plate{position:relative;width:100%;max-width:420px;justify-self:center}
.detail-marker{position:absolute;left:-14px;pointer-events:none;box-shadow:0 0 0 4px #e4dfd6}
.marker-one{top:8%}.marker-two{top:29%}.marker-three{top:52%}
.design-observations{padding-left:1.1rem;font-size:.95rem;color:var(--muted);margin-top:1.5rem}
.design-observations li+li{margin-top:.55rem}
.route-detail{max-width:560px}
.route-crop{display:block;aspect-ratio:1.45;overflow:hidden;background:#fff}
.route-crop img{width:100%;max-width:none;transform:translateY(-33%)}
.system-plate>span:not(.route-crop){font-size:.875rem}
.sequence-panel{grid-template-columns:.9fr 1.4fr;gap:6%}
.sequence-comparison{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;align-items:start}
.sequence-comparison>a:nth-child(2){margin-top:2rem}
.sequence-comparison>a:nth-child(3){margin-top:4rem}
.sequence-comparison img{width:100%;height:auto;transition:transform .2s}
.sequence-comparison a:hover img{transform:translateY(-4px)}
.sequence-comparison>a>span{display:block;font-size:.85rem;line-height:1.4;margin-top:.8rem}
.sequence-comparison small{display:block;font-size:.75rem;color:var(--accent);margin-bottom:.2rem}

/* Shared case-study structure; each project uses its original visual material. */
.project-opening{padding:.5rem 0 2.4rem}
.project-opening>.back-link{margin-bottom:1.2rem}
.project-opening-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:7%;align-items:center}
.project-opening-grid>div{min-width:0}
.project-opening .eyebrow{font-size:.8rem;color:var(--accent);margin-bottom:1rem}
.project-opening h1{font:700 clamp(4.2rem,8vw,7.5rem)/.88 var(--display);letter-spacing:-.025em}
.project-opening h1>span{color:var(--accent)}
.project-deck{font-size:clamp(1.2rem,2vw,1.7rem);line-height:1.4;margin-top:1.5rem;max-width:470px}
.project-facts{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:1.5rem}
.project-facts dt{font-size:.75rem;letter-spacing:.04em;margin-bottom:.4rem}
.project-facts dd{font-size:.95rem;line-height:1.5}
.project-opening .text-action{margin-top:1rem}
.opening-identity,.opening-culture,.opening-landscape{position:relative;display:block;min-width:0}
.opening-identity img,.opening-culture img{width:100%;height:auto}
.opening-identity{background:#232122}.opening-culture{background:#ebebeb}
.art-hint{position:absolute;bottom:.75rem;right:.75rem;padding:.5rem .7rem;font-size:.8rem;color:var(--ink);background:var(--paper)}
.opening-landscape{color:var(--paper);background:#182d2b}
.opening-landscape img{width:100%;aspect-ratio:16/10;object-fit:cover}
.opening-landscape>span{display:flex;justify-content:space-between;gap:1rem;font-size:.9rem;padding:1rem 1.2rem}
.stage-opening .case-arabic{font-size:clamp(1rem,2vw,1.6rem);margin-bottom:1rem!important}
.stage-opening h1{font-size:clamp(3.6rem,6.8vw,6.7rem)}
.dunes-page .case-story{padding-top:3.5rem;margin-bottom:4rem}
.why-page{--accent:#6d4b44}
.culture-page{--accent:#266780}
.study-story{display:grid;grid-template-columns:1fr 2.1fr;gap:10%;padding-top:3.5rem;padding-bottom:4rem}
.study-story>.eyebrow{color:var(--accent);padding-top:.5rem;font-size:.8rem}
.study-story h2,.study-heading h2{font:400 clamp(2rem,3.4vw,3.4rem)/1.15 var(--body);letter-spacing:-.045em}
.study-story h2{margin-bottom:1.5rem}
.study-story p:not(.eyebrow){font-size:1.05rem;color:var(--muted);max-width:750px}
.study-section{padding-top:1rem;padding-bottom:4.5rem}
.study-heading{display:grid;grid-template-columns:1.2fr 1fr;gap:12%;align-items:end;margin-bottom:2.5rem}
.study-heading .eyebrow{font-size:.8rem;color:var(--accent);margin-bottom:.75rem}
.study-heading>p{font-size:1rem;color:var(--muted);max-width:450px}
.guideline-grid,.material-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem 2rem;align-items:start}
.study-art{display:block;min-width:0}
.study-art img{width:100%;height:auto;transition:filter .2s}
.study-art:hover img{filter:brightness(.97)}
.study-art>span{display:flex;justify-content:space-between;gap:1rem;font-size:.9rem;line-height:1.5;margin-top:.8rem}
.study-art>span>span{font-size:1.2rem;color:var(--accent)}
.identity-materials{padding:3.5rem 0 4rem;margin-bottom:4rem;background:#dedad2}
.study-section>.study-art{max-width:1120px;margin-inline:auto}
.source-link{font-size:.9rem;margin-top:2rem;color:var(--accent)}
.source-link a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:5px}
.culture-people{background:#e1e8e9;padding:3.5rem 0 4rem;margin-bottom:3.5rem}
.persona-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3rem;max-width:850px;margin:auto}
.journey-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;list-style:none;padding:0;margin:0 0 2rem}
.journey-steps li{display:flex;align-items:center;gap:.8rem;font-size:.95rem}
.journey-steps span{font-size:.75rem;color:var(--accent);background:#e1e8e9;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex-shrink:0}
.culture-screens{padding:3.5rem 0 4rem;margin-bottom:3rem;background:#e1e8e9}
.culture-page .next-project img{object-position:50% 25%}
.study-section,.culture-screens,.culture-people{scroll-margin-top:1rem}

@media(max-width:1050px){
 .project-opening-grid{grid-template-columns:1fr 1fr;gap:5%}
 .project-facts{gap:1rem}.project-facts dd{font-size:.875rem}
 .project-opening h1{font-size:7.8vw}.stage-opening h1{font-size:6.7vw}
 .study-story{gap:6%;grid-template-columns:1fr 2.2fr}
 .study-heading{gap:6%}.persona-grid{max-width:700px}
 .sequence-panel{grid-template-columns:1fr;gap:2rem}
 .sequence-comparison{max-width:850px;width:100%}
 .sfbt-opening-art{max-width:330px}
}
@media(max-width:760px){
 .identity-meta{font-size:.8rem}.identity-intro>div>p{font-size:.95rem}
 .selected-caption>.eyebrow{font-size:.75rem}.selected-caption>p:not(.eyebrow){font-size:.95rem}
 .project-opening-grid{grid-template-columns:1fr;gap:2rem}
 .project-opening h1{font-size:clamp(4.7rem,12vw,6.5rem)}
 .project-opening-grid>div{display:block}.project-deck{max-width:560px;font-size:1.3rem}
 .project-opening .project-facts{max-width:520px}
 .opening-landscape,.opening-identity,.opening-culture{width:100%;max-width:640px;justify-self:center}
 .opening-culture{max-width:500px}
 .stage-opening h1{font-size:11vw}.stage-opening .case-arabic{font-size:1.4rem}
 .stage-opening .project-deck{margin-top:1rem}
 .study-story{grid-template-columns:1fr;gap:1rem;padding:2.5rem 0 3rem}
 .study-heading{grid-template-columns:1fr;gap:1.2rem;margin-bottom:2rem}
 .study-heading>p{max-width:580px}
 .guideline-grid,.material-grid{gap:1.7rem 1.2rem}
 .study-art>span{font-size:.85rem}
 .journey-steps{grid-template-columns:1fr 1fr;gap:.8rem}
 .persona-grid{gap:1.2rem}
 .study-story h2,.study-heading h2{font-size:2.3rem}
 .design-key p{font-size:.95rem}.design-controls{gap:.3rem}
 .design-controls button{font-size:.875rem;padding:.75rem .7rem;gap:.5rem}
 .design-controls button>span{font-size:.65rem}
 .case-jump{font-size:.8rem}.case-jump>div{gap:1.1rem}
 .campaign-tile>span{font-size:.8rem}
}
@media(max-width:600px){
 .identity-hero{padding-bottom:1.2rem}.bilingual-name{margin:1rem 0 1.2rem;gap:5%}
 .latin-name{font-size:17vw}.arabic-fullname{font-size:11.5vw}
 .identity-meta{font-size:.7rem}.identity-intro{gap:.8rem}
 .identity-intro>p{font-size:1.45rem}.identity-intro>div>p{font-size:.95rem}
 .intro-links{font-size:.9rem;gap:1.2rem}.curation{padding-top:.5rem}
 .curation-heading h2{font-size:.95rem}.selected-caption{margin-top:1rem}
 .selected-caption>p:not(.eyebrow){font-size:1rem}.case-action{font-size:.95rem}
 .selected-project:nth-child(n){margin-top:0}.selected-identity{width:95%}.selected-digital{width:100%}
 .stage-window{aspect-ratio:1.65}.stage-arabic{font-size:1.8rem}
 .project-opening{padding-top:0;padding-bottom:1.5rem}
 .project-opening>.back-link{margin-bottom:.7rem}
 .project-opening .eyebrow{font-size:.75rem;margin-bottom:.75rem}
 .project-opening h1{font-size:15vw}.stage-opening h1{font-size:13.5vw}
 .project-deck{font-size:1.15rem;margin-top:1rem}
 .project-facts{gap:1rem;margin-top:1rem}.project-facts dt{font-size:.7rem}
 .project-facts dd{font-size:.875rem}.project-opening .text-action{margin-top:.7rem}
 .opening-landscape>span{font-size:.85rem;padding:.8rem 1rem}
 .opening-landscape img{aspect-ratio:16/9}.art-hint{font-size:.75rem;bottom:.5rem;right:.5rem}
 .study-story p:not(.eyebrow){font-size:1rem}.study-heading>p{font-size:.95rem}
 .guideline-grid,.material-grid{grid-template-columns:1fr;gap:2rem}
 .identity-materials,.culture-people,.culture-screens{padding:2.5rem 0;margin-bottom:2.5rem}
 .study-section{padding-bottom:3rem}.persona-grid{grid-template-columns:1fr;max-width:330px;gap:2rem}
 .journey-steps li{font-size:.875rem;gap:.55rem}
 .sfbt-opening-art{max-width:310px;width:76%}.sfbt-opening h1{font-size:5rem}
 .sfbt-opening h1>span{font-size:1.8rem}.sfbt-opening-grid{gap:1.5rem}
 .sfbt-deck{font-size:1rem}.opening-credits dd{font-size:.9rem}
 .system-heading>p,.system-copy>p:not(.eyebrow){font-size:.95rem}
 .system-heading h2{font-size:2.2rem}.system-panel{gap:2rem}
 .annotated-plate{width:calc(100% - 16px);max-width:320px}
 .sequence-comparison{gap:.6rem}.sequence-comparison>a>span{font-size:.75rem}
 .sequence-comparison small{font-size:.7rem}
 .route-detail{max-width:420px}.design-controls button{font-size:.8rem;padding:.75rem .5rem}
 .clip-choice>span:not(.clip-indicator){font-size:.85rem}.clip-choice small{font-size:.7rem}
 .portrait-player .clip-choice>span:not(.clip-indicator){font-size:.9rem}
 .player-caption,.open-video{font-size:.8rem}
 .campaign-tile>span{font-size:.75rem}.campaign-tile>span b{font-size:.7rem}
}
@media(max-width:360px){
 .identity-meta{font-size:.63rem}.intro-links{font-size:.8rem}
 .case-jump{font-size:.73rem;gap:.6rem}.case-jump>div{gap:.75rem}
 .design-controls button{font-size:.72rem;padding:.7rem .35rem;gap:.35rem}
 .design-controls button>span{font-size:.6rem}
 .project-facts dd{font-size:.8rem}.project-facts dt{font-size:.65rem}
 .project-deck{font-size:1.05rem}
}
@media(prefers-reduced-motion:reduce){.study-art img,.sequence-comparison img{transition:none}}

/* Finished work first; each screen is a view onto the original design board. */
.why-page #print{padding-top:3.5rem;padding-bottom:1.5rem}
.screen-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
.screen-art{display:block;width:100%;height:auto;aspect-ratio:996/776}
.screen-study>p{font-size:.95rem;line-height:1.6;color:var(--muted);margin-top:.6rem;max-width:430px}
.screen-study .study-art>span{font-size:1rem}
.culture-screens{margin-bottom:0}
.image-dialog{width:min(1200px,94vw);max-width:94vw;max-height:94dvh;padding:1rem;overflow:hidden;gap:.75rem}
.image-dialog[open]{display:flex;flex-direction:column}
.dialog-bar,.dialog-tools,.dialog-foot{flex:none;margin:0;max-width:none}
.dialog-bar{font-size:.9rem;align-items:start}
.dialog-title{line-height:1.45;align-self:center}
.dialog-bar [data-close]{flex-shrink:0}
.dialog-tools{display:flex;align-items:center;gap:.5rem;font-size:.875rem}
.dialog-tools button{background:#dedad2;color:var(--ink)}
.dialog-zoom{min-width:3rem;text-align:center;font-variant-numeric:tabular-nums}
.dialog-help{margin-left:auto;font-size:.8rem;color:var(--muted)}
.image-dialog button:disabled{opacity:.4;cursor:default}
.dialog-viewport{position:relative;flex:none;overflow:auto;width:100%;overscroll-behavior:contain;touch-action:pan-x pan-y pinch-zoom;scroll-behavior:auto;background:#dedad2}
.dialog-viewport:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.dialog-canvas{position:relative;overflow:hidden;margin-inline:auto}
.dialog-image{position:absolute;display:block;max-width:none;margin:0;object-fit:fill;user-select:none}
.is-zoomed .dialog-viewport{cursor:grab}.is-zoomed .dialog-viewport:active{cursor:grabbing}
.dialog-error{padding:1rem;font-size:1rem}
.dialog-foot{font-size:.85rem;gap:.75rem}
.dialog-original{font-size:.85rem;display:inline-flex;align-items:center;min-height:44px;margin-left:auto}
.dialog-count{font-size:.85rem;white-space:nowrap}
@media(max-width:900px){.screen-grid{grid-template-columns:1fr;max-width:680px;margin:auto;gap:2.5rem}}
@media(max-width:600px){
 .why-page #print{padding-top:2.5rem;padding-bottom:.5rem}
 .image-dialog{padding:.75rem;gap:.6rem}
 .dialog-bar{font-size:.8rem}.dialog-tools{flex-wrap:wrap}
 .dialog-help{flex-basis:100%;margin:0;font-size:.75rem}
 .dialog-original,.dialog-count{font-size:.75rem}
 .dialog-foot{gap:.5rem}.dialog-foot button{padding:.5rem}
}
@media(max-height:500px){.dialog-help{display:none}.image-dialog{gap:.35rem;padding:.5rem}.dialog-bar{font-size:.75rem}.image-dialog button{min-height:36px}}

/* A compact bilingual signature and projects that flow without shared rows. */
.home .bilingual-name{grid-template-columns:max-content max-content;justify-content:center;gap:clamp(1.5rem,5vw,4.5rem);margin:.8rem 0 1.5rem}
.home .latin-name{font-size:clamp(4.5rem,12vw,10.5rem)}
.home .arabic-fullname{font-size:clamp(3.4rem,9.2vw,8rem)}
.home .identity-hero{padding-bottom:1.3rem}
.home .selected-grid{--project-gap:48px;grid-template-columns:1.1fr 1fr;gap:var(--project-gap) 5%;align-items:start}
.home .selected-grid.independent-columns{grid-auto-rows:1px;row-gap:0}
.home .selected-project:nth-child(n){width:100%;margin:0;justify-self:stretch}
.home .selected-project:nth-child(odd){grid-column:1}
.home .selected-project:nth-child(even){grid-column:2}
@media(max-width:1050px){.home .selected-grid{--project-gap:40px}}
@media(max-width:760px){
 .home .bilingual-name{gap:4vw}
 .home .latin-name{font-size:16.5vw}
 .home .arabic-fullname{font-size:12vw}
 .home .selected-grid{grid-template-columns:1fr;gap:2.5rem}
 .home .selected-project:nth-child(n){grid-column:1}
}
@media(max-width:600px){
 .home .bilingual-name{gap:4vw;margin:.8rem 0 1rem}
 .home .latin-name{font-size:16vw}
 .home .arabic-fullname{font-size:11.7vw}
}