/**
 * منجم — the reference stylesheet, verbatim.
 *
 * This is mnnjm-4wide-structure-ar-v2.html's <style> block, copied as-is. Do
 * not tidy it, do not rename a class, do not "improve" a value: the templates
 * are written to these exact selectors, and every difference between this and
 * the reference is a difference on the screen.
 *
 * The only additions are at the very bottom, under a marked heading, and they
 * exist for the pages the reference does not contain — a project page, the lab
 * archive, a 404 — plus a skip link and a focus ring, which no design file ever
 * has and every real site needs.
 *
 * @package Mnnjm
 */

:root{
  --bg:#f0f0f0;
  --ink:#111;
  --muted:#6f6f6f;
  --line:rgba(17,17,17,.2);
  --white:#f0f0f0;
  --black:#0f0f0f;
  --max:1920px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Thmanyah Sans","ثمانية سانس",Arial,sans-serif;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
img,video{display:block;width:100%;height:100%;object-fit:cover}
::selection{background:#111;color:#f0f0f0}

/* ثابتة وخفيفة */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:1000;
  opacity:.024;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.66' numOctaves='6' seed='8' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:420px 420px;
}

/* loader */
.loader{
  position:fixed;inset:0;background:#111;color:#f0f0f0;z-index:999;
  display:grid;place-items:center;transition:opacity .65s ease,visibility .65s ease;
}
.loader.hide{opacity:0;visibility:hidden}
.loader-word{
  display:flex;
  gap:.18em;
  direction:ltr;
  font-size:clamp(46px,8vw,120px);
  font-weight:500;
  letter-spacing:0;
  overflow:hidden;
}
.loader-word span{transform:translateY(120%);animation:letterIn .65s cubic-bezier(.2,.7,.2,1) forwards}
.loader-word span:nth-child(2){animation-delay:.07s}
.loader-word span:nth-child(3){animation-delay:.14s}
.loader-word span:nth-child(4){animation-delay:.21s}
.loader-word span:nth-child(5){animation-delay:.28s}
@keyframes letterIn{to{transform:translateY(0)}}

/* header */
.header{
  position:fixed;inset:0 0 auto;z-index:90;
  color:var(--header-color,#f0f0f0);
  mix-blend-mode:difference;
}
.header__inner{
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;padding:18px 20px;direction:ltr;
}
.logo{
  justify-self:start;
  display:flex;
  align-items:center;
  gap:.34em;
  font-weight:500;
  letter-spacing:0;
  font-size:15px;
  direction:ltr;
}
.logo span{
  display:block;
  line-height:1;
}
.nav{display:flex;gap:24px;font-size:11px}
.nav a,.contact{position:relative}
.nav a:after,.contact:after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:.25s
}
.nav a:hover:after,.contact:hover:after{transform:scaleX(1);transform-origin:left}
.contact{justify-self:end;font-size:11px}

/* hero */
.mv{
  min-height:100svh;position:relative;overflow:hidden;color:#f0f0f0;
  background:#101010;
}
.mv__background{position:absolute;inset:0;z-index:0}
.mv__background video{filter:saturate(.75) contrast(1.03) brightness(.72)}
.mv__filter{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom,rgba(0,0,0,.13),rgba(0,0,0,.2)),
             linear-gradient(to top,rgba(0,0,0,.22),transparent 50%);
}
.mv__head{
  position:relative;z-index:2;padding:90px 20px 20px;
}
.mv__head-title{
  margin:0;font-family:"Thmanyah Sans","ثمانية سانس",Arial,sans-serif;
  font-size:clamp(68px,10vw,168px);line-height:.82;
  letter-spacing:-.065em;font-weight:500;
  max-width:12ch;
}
.mv__head-title span{display:block}
.mv__time{
  position:absolute;right:20px;bottom:68px;z-index:3;font-size:11px;direction:ltr;
}
.mv__mode{
  position:absolute;left:20px;bottom:66px;z-index:3;
}
.mv__mode button{
  border:0;background:transparent;color:#f0f0f0;padding:0;
  font-size:12px;cursor:pointer;
}
.mv__focus{
  position:absolute;inset:0;z-index:4;
  padding:100px 20px 26px;
  display:grid;grid-template-columns:1fr 1fr;
  align-content:space-between;gap:20px;
  opacity:0;pointer-events:none;transition:.35s ease;
  background:rgba(0,0,0,.18);backdrop-filter:blur(10px);
}
.mv.focus .mv__focus{opacity:1;pointer-events:auto}
.focus-info{font-size:12px;line-height:1.7;direction:ltr}
.focus-info p{margin:0}
.focus-info .title{margin-bottom:12px}
.focus-catch{
  align-self:end;justify-self:end;font-size:clamp(54px,8vw,126px);
  line-height:.8;letter-spacing:-.06em;text-align:right;
}
.focus-catch small{display:block;font-size:.22em;letter-spacing:0;color:#bbb;margin-bottom:10px}
.focus-grid{align-self:end;justify-self:start;font-size:12px;line-height:1.7;direction:ltr}
.focus-grid p{margin:0}

/* about */
.about{padding:120px 20px 140px}
.about__title{
  margin:0 0 100px;
  font-size:clamp(48px,7.6vw,124px);line-height:.95;letter-spacing:-.055em;font-weight:500;
  max-width:15ch;
}
.about__row{
  display:grid;grid-template-columns:1fr .9fr;gap:18px;align-items:end;direction:ltr;
}
.about__card{
  position:relative;min-height:560px;overflow:hidden;background:#111;color:#f0f0f0;
}
.about__card img{position:absolute;inset:0}
.about__card:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.4),transparent 55%)}
.about__card-body{
  position:absolute;inset:0;z-index:2;padding:20px;display:flex;flex-direction:column;justify-content:space-between;
}
.gps{font-size:11px;direction:ltr}
.location{font-size:clamp(40px,5vw,76px);line-height:.9;letter-spacing:-.05em}
.location span{display:block;font-size:.22em;letter-spacing:0;margin-bottom:8px}
.since{font-size:clamp(34px,4vw,62px);line-height:.9}
.since span{font-size:.28em;display:block;margin-bottom:6px}
.about__group{padding:10px 0 8px;direction:rtl}
.section-label{font-size:11px;margin-bottom:36px;direction:ltr}
.about__group p{font-size:20px;line-height:1.6;margin:0 0 20px;max-width:30ch}
.about__group .en{font-size:11px;color:var(--muted);direction:ltr;max-width:48ch}
.text-link{font-size:11px;display:inline-block;border-bottom:1px solid currentColor;padding-bottom:3px;margin-top:20px}

/* services */
.services{padding:0 20px 140px}
.big-section-title{
  margin:0 0 56px;font-size:clamp(60px,9vw,142px);line-height:.82;letter-spacing:-.06em;font-weight:500;
}
.services__contents{
  font-size:clamp(30px,4.4vw,70px);line-height:1.17;letter-spacing:-.045em;direction:ltr;
  margin-bottom:62px;
}
.services__contents p{margin:0}
.services__texts{display:grid;grid-template-columns:1fr 1fr;gap:30px;font-size:13px;line-height:1.8}
.services__texts p{margin:0;max-width:46ch}
.services__texts .en{direction:ltr;color:var(--muted);font-size:11px}

/* case */
.case{padding:0 20px 140px}
.case__items{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.case__item{display:block}
.case__image{position:relative;aspect-ratio:1.33/1;overflow:hidden;background:#ddd}
.case__image img{transition:transform .75s cubic-bezier(.2,.7,.2,1)}
.case__item:hover img{transform:scale(1.025)}
.case__num,.case__award{
  position:absolute;z-index:2;color:#fff;font-size:10px;line-height:1.45;
  text-shadow:0 1px 10px rgba(0,0,0,.3)
}
.case__num{left:12px;top:12px}
.case__award{right:12px;top:12px;text-align:right;direction:ltr}
.case__award .title{display:block;margin-bottom:5px;color:#ddd}
.case__detail{
  display:flex;justify-content:space-between;gap:20px;padding:10px 0 24px;
  font-size:11px;direction:ltr;
}
.case__detail h3{margin:0;font-size:11px;font-weight:400}
.case__detail p{margin:0;color:var(--muted)}

/* approach */
.approach{
  min-height:100svh;position:relative;overflow:hidden;color:#f0f0f0;
  padding:80px 20px 26px;display:flex;flex-direction:column;justify-content:space-between;
}
.approach__bg{position:absolute;inset:0;z-index:0}
.approach__bg video{filter:brightness(.55) saturate(.75)}
.approach:after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.12);z-index:1}
.approach>*:not(.approach__bg){position:relative;z-index:2}
.approach__title{margin:0;font-size:clamp(70px,11vw,170px);line-height:.76;letter-spacing:-.07em;font-weight:500}
.approach__copy{font-size:20px;line-height:1.6}
.approach__copy small{display:block;font-size:11px;color:#d0d0d0;direction:ltr;margin-top:8px}
.approach__tags{display:flex;gap:10px;direction:ltr}
.tag{border:1px solid rgba(255,255,255,.55);border-radius:999px;padding:8px 12px;font-size:11px}

/* updates */
.updates{padding:120px 20px 140px}
.updates__items{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.update{
  display:grid;grid-template-columns:180px 120px 1fr;
  gap:18px;padding:18px 0;border-bottom:1px solid var(--line);align-items:start;direction:ltr;
}
.update .thumb{aspect-ratio:1.6;background:#ddd}
.update time{font-size:11px;color:var(--muted)}
.update h3{margin:0 0 8px;font-size:18px;font-weight:400;direction:rtl}
.update p{margin:0;color:var(--muted);font-size:12px;line-height:1.7;direction:rtl}

/* lab */
.lab{
  min-height:100svh;position:relative;overflow:hidden;color:#f0f0f0;
}
.lab__bg{position:absolute;inset:0}
.lab__bg video{filter:brightness(.58) saturate(.72)}
.lab__cover{
  position:relative;z-index:2;min-height:100svh;padding:28px 20px;
  display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(to top,rgba(0,0,0,.3),transparent 60%);
}
.lab__label{font-size:11px;direction:ltr}
.lab__copy{max-width:600px}
.lab__copy p{font-size:22px;line-height:1.55;margin:0 0 12px}
.lab__copy .en{direction:ltr;color:#ddd;font-size:11px;max-width:48ch}
.lab__link{font-size:11px;border-bottom:1px solid currentColor;padding-bottom:3px;align-self:flex-start}

/* how */
.how{
  background:#0f0f0f;color:#f0f0f0;padding:120px 20px 140px;
}
.how h2{margin:0 0 60px;font-size:clamp(66px,10vw,156px);line-height:.8;letter-spacing:-.065em;font-weight:500}
.how p{font-size:20px;line-height:1.6;max-width:34ch}

/* footer */
.footer{padding:44px 20px 22px;background:#f0f0f0}
.footer__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;direction:ltr}
.footer__col .title{font-size:10px;color:var(--muted);margin-bottom:12px}
.footer__col .text{font-size:13px;line-height:1.6}
.footer__col a{display:inline}
.footer__under{
  margin-top:90px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;direction:ltr;
}
.footer__word{font-size:clamp(90px,17vw,270px);line-height:.65;letter-spacing:-.07em;font-weight:500}
.footer__sub{font-size:18px;direction:rtl}
.footer__bottom{margin-top:40px;display:flex;justify-content:space-between;font-size:10px;color:var(--muted);direction:ltr}

/* reveal */
.reveal{opacity:0;transform:translateY(30px);transition:.8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

@media(max-width:900px){
  .header__inner{grid-template-columns:1fr auto}
  .nav{display:none}
  .mv__focus{grid-template-columns:1fr}
  .about__row{grid-template-columns:1fr}
  .services__texts{grid-template-columns:1fr}
  .case__items{grid-template-columns:1fr}
  .update{grid-template-columns:90px 1fr}
  .update .thumb{grid-row:span 2}
  .update .content{grid-column:2}
  .footer__grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .mv__head-title{font-size:18vw}
  .about,.services,.case,.updates,.how{padding-left:14px;padding-right:14px}
  .header__inner,.mv__head,.lab__cover,.footer{padding-left:14px;padding-right:14px}
  .mv__time{right:14px}.mv__mode{left:14px}
  .approach{padding-left:14px;padding-right:14px}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ═══════════════════════════════════════════════════════════════
   BEYOND THE REFERENCE
   ═══════════════════════════════════════════════════════════════

   Everything above this line is the reference file, unchanged. Everything
   below exists only because a real site has pages the design file does not
   contain, plus the two things no design file ever has: a skip link and a
   visible focus ring.

   Nothing here overrides anything above it. */

.skip{position:absolute;left:-9999px;z-index:1001}
.skip:focus{left:20px;top:20px;padding:10px 16px;background:#111;color:#f0f0f0;font-size:11px}

:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* The video is a setting, not a shipped file, so there has to be something to
   draw when nothing has been uploaded. Not a grey box: the same survey field
   the films are graded onto, so an empty install still looks like this site. */
.film-none{
  position:absolute;inset:0;
  background-color:#101010;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:56px 56px;
}

/* Inner pages: project, lab note, lab index, 404. Same type scale, same rules,
   same paddings as the sections above. */
.inner{padding:150px 20px 140px}
.inner--dark{background:#0f0f0f;color:#f0f0f0;min-height:100svh}
.inner--dark .update time,.inner--dark .update p,.inner--dark .case__detail p{color:#c9c9c9}
.inner--dark .updates__items,.inner--dark .update,.inner--dark .facts__row{border-color:rgba(255,255,255,.2)}

.inner__label{font-size:11px;direction:ltr;color:var(--muted);display:block;margin-bottom:20px}
.inner--dark .inner__label{color:#c9c9c9}
.inner__ar{font-size:clamp(20px,2.4vw,32px);line-height:1.5;margin:14px 0 0;font-weight:500}
.inner__stage{aspect-ratio:16/9;position:relative;overflow:hidden;background:#ddd;margin-bottom:10px}
.inner__lead{font-size:clamp(20px,2.6vw,34px);line-height:1.5;max-width:28ch;margin:40px 0}

.facts{display:grid;gap:2px;direction:ltr;margin:40px 0}
.facts__row{display:grid;grid-template-columns:140px 1fr;gap:18px;padding:12px 0;border-top:1px solid var(--line);font-size:11px}
.facts__row:first-child{border-top:0}
.facts dt{color:var(--muted)}
.facts dd{margin:0}
.inner--dark .facts dt{color:#c9c9c9}

.note-block{margin:40px 0}
.note-block p{margin:12px 0 0;max-width:42ch;font-size:20px;line-height:1.6}

.prose{max-width:68ch;font-size:15px;line-height:2}
.prose>*+*{margin-top:1.1em}
.prose a{border-bottom:1px solid var(--line)}

.inner__next{margin-top:80px;padding-top:40px;border-top:1px solid var(--line)}
.inner__next .case__items{grid-template-columns:1fr;max-width:640px;margin-top:20px}

/* Lab filters. Buttons, not links: they filter what is already on the page and
   do not change the address, and a link would promise a destination it never
   goes to. */
.filters{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:40px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.2);direction:ltr}
.filters button{position:relative;border:0;background:transparent;color:#c9c9c9;font-size:11px;cursor:pointer;padding:0}
.filters button:hover,.filters button.on{color:#f0f0f0}
.filters button:after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:.25s}
.filters button.on:after{transform:scaleX(1);transform-origin:left}

.board{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.board .case__item.out{display:none}

.gone__num{font-size:clamp(90px,17vw,270px);line-height:.8;color:var(--line);direction:ltr;font-weight:500;letter-spacing:-.07em}
.gone__title{font-size:clamp(48px,7.6vw,124px);line-height:.95;letter-spacing:-.055em;font-weight:500;margin:20px 0 0;max-width:15ch}
.gone__links{display:flex;gap:24px;margin-top:40px}

@media(max-width:900px){
  .board{grid-template-columns:1fr}
}
@media(max-width:600px){
  .inner{padding-left:14px;padding-right:14px}
  .skip:focus{left:14px}
}