/* Projects, Journal and articles, from the mock-up's projects.html, journal.html and journal-what-is-an-ibox.html (2026-10-29) */
.lhero{padding-block:24px 4px}
.lhero h1{font-size:clamp(44px,6vw,72px);letter-spacing:-0.04em}
.lhero .lead{font-size:clamp(17px,1.6vw,22px);color:var(--muted);max-width:40em;margin-top:10px;line-height:1.45}
.sub{color:var(--muted)}

/* projects */
.pjh{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;padding-block:20px 8px}
.pjh h1{font-size:clamp(44px,6vw,72px);letter-spacing:-0.04em;line-height:1}
.pjh .lead{font-size:clamp(17px,1.6vw,22px);color:var(--muted);line-height:1.5;margin-top:12px;max-width:36em}
.pjm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;border-radius:16px;overflow:hidden}
.pjm span{display:block;aspect-ratio:4/3;background:var(--stone);overflow:hidden}
.pjm span:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.pjm img{width:100%;height:100%;object-fit:cover;display:block}
@media (min-width:1000px){.pjh{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:40px}}
.pjc{margin-top:20px}
a.chip{text-decoration:none;color:var(--ink)}
.pjc .chip[aria-pressed=true],.tchips .chip[aria-pressed=true],.bchips .chip[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.pjs{padding-block:28px 4px}
.pjs h2{font-size:clamp(22px,2.6vw,30px);letter-spacing:-0.02em}
.pjs .sub{margin-top:4px;font-size:17px}
.pjs[hidden]{display:none}
.pjs:not(.open) .pjg li.x{display:none}
.pjmore{margin-top:14px}
.pjs.open .pjmore{display:none}
.pjmore.m{display:none}
@media (max-width:700px){.pjs:not(.open) .pjg li.y{display:none}.pjmore.m{display:inline-flex}.pjmore.d{display:none}}
.pjg{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.pjg figure{margin:0;height:100%;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#FFF}
.pjp{display:block;aspect-ratio:4/3;background:var(--stone);overflow:hidden}
.pjp img{width:100%;height:100%;object-fit:cover;display:block}
.pjg figcaption{display:flex;flex-direction:column;gap:2px;padding:10px 12px 12px}
.pjg b{font-size:15px;line-height:1.3;font-weight:600;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;min-height:2.6em}
.pjg figcaption span{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pjd{margin-top:24px;padding-top:28px;border-top:1px solid var(--line)}
.pjd h2{font-size:clamp(22px,2.6vw,30px);letter-spacing:-0.02em}
.pjd>.sub{margin-top:4px;font-size:17px}
.pjw{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pjw li{padding:18px;border:1px solid var(--line);border-radius:16px;background:#FFF}
.pjw b{display:block;font-size:17px;letter-spacing:-0.01em;margin-bottom:6px}
.pjw span{color:var(--muted);font-size:15px;line-height:1.5}
.facts2{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.facts2 li{padding:18px;border:1px solid var(--line);border-radius:16px;background:#FFF}
.facts2 b{display:block;font-size:22px;letter-spacing:-0.02em}
.facts2 span{color:var(--muted);font-size:15px}
.tchips{margin-top:18px}
.bchips{margin-top:10px}
.tchips .lab,.bchips .lab{font-size:13px;font-weight:600;color:var(--muted);align-self:center;margin-inline-end:2px;min-width:5.5em}
#prod .pg{margin-top:18px}
@media (max-width:1100px){.pjg{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){
  .pjg{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.pjg figcaption{padding:8px 10px 10px}.pjg b{font-size:13px}
  .pjw,.facts2{grid-template-columns:1fr}
  .tchips .lab,.bchips .lab{min-width:3.4em;margin-inline-end:4px}
}

/* journal */
.jsec{padding-block:8px 28px}
.jl{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.jl a{display:flex;flex-direction:column;height:100%;border:1px solid var(--line);border-radius:16px;background:#FFF;overflow:hidden;text-decoration:none;color:var(--ink)}
.jl a:hover{border-color:var(--ink)}
.jp{display:block;aspect-ratio:4/3;border-bottom:1px solid var(--line);overflow:hidden;background:#FFF}
.jp img{width:100%;height:100%;object-fit:cover;display:block}
.jt{display:flex;flex-direction:column;gap:8px;padding:18px 20px 22px;flex:1}
.jl b{font-size:clamp(17px,1.7vw,22px);line-height:1.2;letter-spacing:-0.015em}
.jx{color:var(--muted);line-height:1.45}
.jd{font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.jm{margin-top:auto;padding-top:6px;font-size:13px;font-weight:600;color:var(--ink)}
.jf{grid-column:1/-1}
.jf a{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.jf .jp{aspect-ratio:auto;min-height:340px;border-bottom:0;border-inline-end:1px solid var(--line)}
.jf .jp img{object-fit:contain;padding:28px}
.jf .jt{justify-content:center;padding:32px 36px;gap:12px}
.jf b{font-size:clamp(30px,3vw,44px);letter-spacing:-0.025em}
.jf .jx{font-size:17px}
@media (max-width:900px){.jl{grid-template-columns:1fr}.jf a{grid-template-columns:1fr}.jf .jp{min-height:0;aspect-ratio:4/3;border-inline-end:0;border-bottom:1px solid var(--line)}.jf .jt{padding:20px}}
@media (max-width:600px){.jl li:not(.jf) a{display:grid;grid-template-columns:116px minmax(0,1fr)}.jl li:not(.jf) .jp{aspect-ratio:auto;height:100%;border-bottom:0;border-inline-end:1px solid var(--line)}.jl li:not(.jf) .jt{padding:14px 14px 16px;gap:6px}.jl li:not(.jf) b{font-size:17px}.jl li:not(.jf) .jx{font-size:13px}.jl li:not(.jf) .jm{display:none}}

/* article */
.art{padding-top:24px}
.art h1{font-size:clamp(30px,5vw,72px);letter-spacing:-0.03em;line-height:1.05;margin-top:6px}
.art .upd{font-size:13px;color:var(--muted);margin-top:6px}
.txt{max-width:44em}
.txt>p{margin-top:14px;line-height:1.6;font-size:17px}
.txt h2{margin-top:36px;font-size:clamp(26px,3vw,40px);letter-spacing:-0.02em}
.txt .more{min-height:0}
.apic{margin:20px 0 0;max-width:280px}
.apic img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:12px;background:#FFF}
.apic figcaption{font-size:13px;color:var(--muted);margin-top:6px}
.fcount{margin-top:14px;font-size:15px;color:var(--muted)}
#prod .foot{margin-top:16px}
.txt>p.jd{font-size:13px;margin-top:0;line-height:1.4}
.txt>p.upd{font-size:13px;margin-top:6px}
.jf .jp{position:relative}
.jf .jp img{position:absolute;inset:0}
@media (max-width:900px){.jf .jp{position:static}.jf .jp img{position:static}}
.jp.pr img{object-fit:contain;padding:12px}
/* Projects in two halves (Tariq 2026-11-03, DECISIONS 213): two cards under the lead, Public areas then Our projects;
   on phones a switch stays under the menu bar */
.pjsw{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:36em}
.pjsw a{display:block;height:100%;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:#FFF;color:inherit;text-decoration:none}
.pjsw a:hover{border-color:var(--ink)}
.pjsw b{display:block;font-size:20px;letter-spacing:-0.02em}
.pjsw b::after{content:" \2192";font-weight:400}
.pjsw span{display:block;margin-top:4px;color:var(--muted);font-size:14px;line-height:1.4}
.pjtab{display:none}
.pja,.pjo{scroll-margin-top:92px}
.pja{margin-top:28px;padding-top:28px;border-top:1px solid var(--line)}
.pjo{margin-top:36px;padding-top:28px;border-top:1px solid var(--line)}
.pja h2,.pjo>.wrap>h2{font-size:clamp(30px,4vw,48px);letter-spacing:-0.03em;line-height:1.05}
.pja .sub,.pjo>.wrap>.sub{margin-top:8px;font-size:17px;max-width:46em}
#public-areas .pg li.xs{display:none}#public-areas.open .pg li.xs{display:block}
@media (max-width:700px){
 .pjsw b{font-size:17px}
 .pjtab{display:flex;position:sticky;top:calc(env(safe-area-inset-top,0px) + 58px);z-index:15;margin:12px 16px 0;padding:4px;gap:4px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
 .pjtab a{flex:1;text-align:center;padding:9px 6px;border-radius:999px;font-size:14px;font-weight:600;color:inherit;text-decoration:none}
 .pjtab a[aria-current=true]{background:var(--ink);color:#fff}
 .pja,.pjo{scroll-margin-top:118px}
}
.pjsw .pjn{margin-top:8px;color:var(--ink);font-weight:600;font-size:13px}
[dir=rtl] .pjsw b::after{content:" \2190"}