/* Projects index: same type scale as the About story hero, cards from the home page in two columns */
.pj-head { padding: clamp(7.5rem, 14vh, 10rem) 0 clamp(2rem, 5vh, 3rem); }
.pj-head .crumbs { margin: 0 0 1.2rem; color: var(--muted); font-size: .85rem; }
.pj-head .crumbs a { color: inherit; }
.pj-head h1 { margin: 0; max-width: 16ch; font: 500 clamp(2.6rem, 5vw, 4.6rem)/.98 var(--display); letter-spacing: -.045em; color: var(--ink); text-transform: none; }
.pj-head .lede { max-width: 38rem; margin: 1.4rem 0 0; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.6; color: var(--muted); }
.pj-grid { margin-top: 1.6rem; }
.pj-grid .wcard.is-hidden { display: none; }
.pj-grid .wc-h { text-transform: none; font: 500 clamp(1.8rem, 2.6vw, 2.4rem)/1.05 var(--display); font-stretch: normal; letter-spacing: -.04em; }
@media (min-width: 820px) { .pj-grid .wcard { min-height: 36rem; } }
.pj-grid .wc-shot--wide { width: 76% !important; margin-right: 0 !important; }
.pj-grid .wc-shot--wide img { aspect-ratio: 16 / 10; object-position: top; border-width: 7px; border-radius: 1.2rem 1.2rem 0 0; }
@media (max-width: 819px) { .pj-grid .wc-shot--wide { width: 72% !important; } }
/* Next-step band: same type sizes as the About page CTA (layout unchanged) */
html:root:not(#unc-a):not(#unc-b):not(#unc-c) .sec--tint .eyebrow { font-size: 11.52px !important; line-height: 1.3 !important; }
html:root:not(#unc-a):not(#unc-b):not(#unc-c) .sec--tint h2 { font-size: clamp(2.2rem, 5.5vw, 4.2rem) !important; line-height: 1 !important; letter-spacing: -.02em !important; font-weight: 500 !important; }
html:root:not(#unc-a):not(#unc-b):not(#unc-c) .sec--tint .link-arrow { font-size: 15px !important; }
@media (max-width: 699px) { html:root:not(#unc-a):not(#unc-b):not(#unc-c) .sec--tint .link-arrow { font-size: 14px !important; } }

/* TUNED: projects (2026-10-16) */
@media (min-width: 700px) {
html:root:not(#unc-a):not(#unc-b) .mo-w span { font-size: 69px !important; }
html:root:not(#unc-a):not(#unc-b) .wc-copy p.wc-lab { letter-spacing: -0.005em !important; }
html:root:not(#unc-a):not(#unc-b) .pj-head p.lede { font-size: 15px !important; }
html:root:not(#unc-a):not(#unc-b) .wc-copy h3.wc-h { letter-spacing: -0.033em !important; }
html:root:not(#unc-a):not(#unc-b) .wc-copy p.wc-d { font-size: 13px !important; letter-spacing: -0.008em !important; }
html:root:not(#unc-a):not(#unc-b) .wc-copy p.wc-res { font-size: 11px !important; letter-spacing: -0.005em !important; }
}
@media (max-width: 699.98px) {
html:root:not(#unc-a):not(#unc-b) .wc-copy p.wc-lab { font-size: 8px !important; letter-spacing: 0.069em !important; line-height: 1.3 !important; }
html:root:not(#unc-a):not(#unc-b) .pj-head p.lede { font-size: 13.5px !important; }
html:root:not(#unc-a):not(#unc-b) .wc-copy p.wc-res { font-size: 10px !important; }
html:root:not(#unc-a):not(#unc-b) #projSearch { font-size: 14.5px !important; letter-spacing: -0.014em !important; }
}

/* ---------- language flip thumbnail (RMS: English ⇄ Arabic) ----------
   The phone screen turns over like a card: English on the front, Arabic on the back. */
.wc-shot--flip { perspective: 900px; }
.wc-shot--flip .fl-card { position: absolute; inset: 0; transform-style: preserve-3d; animation: fl-turn 7s cubic-bezier(.65,0,.35,1) infinite; }
.wc-shot--flip .fl-f { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.wc-shot--flip .fl-b { transform: rotateY(180deg); }
.wc-shot--flip .fl-f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
@keyframes fl-turn { 0%, 38% { transform: rotateY(0); } 50%, 88% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
.wc-shot--flip .fl-tag { position: absolute; z-index: 3; left: 50%; bottom: .8rem; transform: translateX(-50%); display: flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: 999px; background: rgba(12,12,13,.82); color: #fff; font: 600 .7rem/1 var(--mono, ui-monospace, monospace); letter-spacing: .08em; white-space: nowrap; }
.wc-shot--flip .fl-tag b { font-weight: 600; opacity: .45; animation: fl-en 7s infinite; }
.wc-shot--flip .fl-tag b + i + b { animation-name: fl-ar; }
.wc-shot--flip .fl-tag i { font-style: normal; opacity: .7; }
@keyframes fl-en { 0%, 44% { opacity: 1; } 50%, 94% { opacity: .4; } 100% { opacity: 1; } }
@keyframes fl-ar { 0%, 44% { opacity: .4; } 50%, 94% { opacity: 1; } 100% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .wc-shot--flip .fl-card, .wc-shot--flip .fl-tag b { animation: none; } }