/* A continuous portfolio: curated opening rows, all collections visible. */
html { scroll-padding-top:calc(var(--nav-height,73px) + var(--index-height,54px) + 18px); }
body[data-layout="showcase"] { --collection-space:66px; }
.hero { padding-bottom:16px; }
.hero h1 { max-width:22ch; }
.hero .living { max-width:590px; }
#portfolio { padding-top:30px; padding-bottom:0; }
.portfolio-intro { display:flex; align-items:baseline; justify-content:space-between; gap:24px; padding-bottom:22px; }
.portfolio-intro h2 { font:420 32px/1.2 var(--serif); letter-spacing:-.02em; }
.portfolio-intro-copy { color:var(--ink-2); font:400 13px/1.65 var(--body); max-width:440px; }
.portfolio-indexbar { position:sticky; top:var(--nav-height,73px); z-index:50; background:var(--bone); border-block:1px solid var(--bone-3); }
.work-index { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; }
.work-index a { position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:54px; padding-block:12px; color:var(--ink-2); font:500 14px/1.5 var(--body); }
.work-index a:hover, .work-index a[aria-current="location"] { color:var(--olive-deep); }
.work-index a[aria-current="location"]::after { content:''; position:absolute; inset-inline:0; bottom:-1px; height:2px; background:var(--olive); }
.index-count { font:400 10px var(--mono); color:var(--ink-2); }
.portfolio-panels { display:block; }
#work, #static-ads, #apparel, #identities { padding-block:var(--collection-space); }
.work-collection { min-width:0; }
.work-collection + .work-collection { border-top:1px solid var(--bone-3); }
.collection-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,410px); align-items:end; gap:32px; margin-bottom:30px; }
.collection-heading { display:flex; align-items:baseline; gap:16px; min-width:0; }
.collection-number { font:400 11px/1.5 var(--mono); color:var(--olive-deep); flex-shrink:0; }
.collection-title { font:420 clamp(31px,3.1vw,44px)/1.2 var(--serif); letter-spacing:-.02em; }
.collection-description { margin:0; font:400 14px/1.7 var(--body); color:var(--ink-2); max-width:410px; }
.work-toolbar { margin:0 0 24px; }
.work-filters label { font-size:12px; }
#film-grid.bento { gap:32px 22px; }
#film-grid .film-art { border-radius:7px; background:#26261f; }
#film-grid .film-art video[data-hover-preview] { object-fit:contain; object-position:center; pointer-events:none; }
#film-grid .bmeta { min-height:82px; padding-top:14px; }
#film-grid .btitle { font-size:20px; }
#film-grid .bsub { font-size:12px; line-height:1.55; }
#film-grid .bcard[data-featured="true"] .btitle { font-weight:600; }
#film-grid .bcard[data-featured="true"] .film-art { box-shadow:0 12px 26px -18px #23211a80; }
#film-grid .bcard:hover .film-art { outline-offset:4px; }
.project-notes { margin-top:30px; }
#static-ads { background:var(--card); }
.ads-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:38px 26px; }
.ad-art { border-radius:5px; }
.ad-caption { padding-top:14px; }
.ad-caption h3 { font-size:20px; letter-spacing:0; }
.ad-caption p { line-height:1.6; }
.ad-card[data-featured="true"] .ad-art { box-shadow:0 12px 26px -20px #23211a88; }
#apparel { background:var(--bone); }
.garment-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px 26px; }
.garment-art { border-radius:6px; }
.garment-caption { display:block; padding-top:14px; }
.garment-caption h3 { font-size:19px; }
.garment-caption p { font-size:12px; }
.garment-card[data-featured="true"] .garment-caption h3 { color:var(--olive-deep); }
html[dir="rtl"] .garment-caption h3 { font-family:'IBM Plex Sans Arabic',var(--body); letter-spacing:0; }
#identities { background:#e8e6dc; }
.identity-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:38px 28px; }
.identity-image { border-radius:5px; }
.identity-image img { aspect-ratio:3/2; object-fit:cover; object-position:center top; }
.identity-caption { padding-top:18px; }
.identity-caption h3 { font-size:24px; }
.identity-caption p { max-width:420px; }
.identity-swatches span { width:12px; height:12px; }
#client-feedback { border-top:0; padding-block:48px; }
html[dir="rtl"] .portfolio-intro h2, html[dir="rtl"] .collection-title { font-family:'Tajawal',var(--body); font-weight:500; letter-spacing:0; }
html[dir="rtl"] .work-index a, html[dir="rtl"] .collection-description, html[dir="rtl"] .portfolio-intro-copy { font-family:'IBM Plex Sans Arabic',var(--body); }
@media (min-width:1001px) {
 #film-grid[data-filter="all"] .bcard[data-featured="true"] .film-art { aspect-ratio:3/4; }
}
@media (max-width:1000px) {
 body[data-layout="showcase"] { --collection-space:54px; }
 .collection-head { grid-template-columns:minmax(0,1fr) minmax(240px,350px); gap:24px; }
 .collection-title { font-size:34px; }
 .ads-grid, .garment-grid { gap:30px 20px; }
 #film-grid.bento { gap:28px 18px; }
 .identity-caption { flex-wrap:wrap; gap:8px; }
}
@media (max-width:900px) {
 .ads-grid, .garment-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .garment-caption h3 { font-size:17px; }
 .portfolio-intro { gap:20px; }
 .portfolio-intro-copy { max-width:310px; }
}
@media (max-width:760px) {
 .collection-head { grid-template-columns:1fr; gap:12px; margin-bottom:24px; }
 .collection-description { max-width:560px; }
 .collection-title { font-size:34px; }
 .collection-heading { gap:12px; }
 .portfolio-intro { align-items:flex-start; flex-direction:column; gap:8px; }
 .portfolio-intro h2 { font-size:29px; }
 .portfolio-intro-copy { max-width:none; }
 .identity-grid { grid-template-columns:1fr; gap:32px; }
 .identity-caption { flex-wrap:nowrap; }
 #film-grid.bento { gap:26px 16px; }
 #film-grid .btitle { font-size:18px; }
 .work-index { gap:18px; }
}
@media (max-width:600px) {
 body[data-layout="showcase"] { --collection-space:42px; }
 #portfolio { padding-top:20px; }
 .portfolio-intro { padding-bottom:18px; }
 .portfolio-intro h2 { font-size:27px; }
 .work-index { gap:12px; grid-template-columns:repeat(4,auto); }
 .work-index a { justify-content:center; min-height:48px; padding:10px 0; font-size:13px; white-space:nowrap; }
 .index-count { display:none; }
 .collection-title { font-size:31px; }
 .collection-description { font-size:13px; }
 .collection-number { font-size:10px; }
 #film-grid .btitle { font-size:17px; }
 #film-grid .bsub { font-size:11px; }
 #film-grid .bmeta { min-height:84px; }
 .ads-grid { grid-template-columns:1fr; gap:30px; }
 .ad-caption h3 { font-size:20px; }
 .garment-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 16px; }
 .garment-caption h3 { font-size:16px; }
 .garment-caption p { font-size:11px; }
 .identity-caption h3 { font-size:21px; }
 .identity-caption p { font-size:13px; }
 #client-feedback { padding-block:38px; }
}
@media (max-width:359px) {
 #film-grid.bento, .garment-grid { grid-template-columns:1fr; }
 .work-index { gap:8px; }
 .work-index a { font-size:12px; }
 .identity-caption { flex-wrap:wrap; }
}
/* Existing work first; the three Arabic designs form the middle desktop row. */
@media (min-width:901px) {
 #apparel .garment-grid { grid-template-columns:repeat(12,minmax(0,1fr)); }
 #apparel .garment-card:nth-child(-n+3) { grid-column:span 4; }
 #apparel .garment-card:nth-child(4) { grid-column:3 / span 4; }
 #apparel .garment-card:nth-child(5) { grid-column:7 / span 4; }
 #apparel .garment-card:nth-child(n+6) { grid-column:span 4; }
 #apparel .garment-card:nth-child(12) { grid-column:3 / span 4; }
 #apparel .garment-card:nth-child(13) { grid-column:7 / span 4; }
}
@media (min-width:601px) and (max-width:900px) {
 #apparel .garment-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
 #apparel .garment-card:nth-child(-n+3) { grid-column:span 2; }
 #apparel .garment-card:nth-child(n+4) { grid-column:span 3; }
}
@media (min-width:360px) and (max-width:600px) {
 #apparel .garment-card:first-child { grid-column:span 2; width:100%; max-width:360px; justify-self:center; }
}